css3 hover effects a tutorial

[Hyper]

1.The first includes the link color animation that makes the link colors to fade :

so the basic styling of the link what you see in your global.css is seen like this :

Kod: Tümünü Seç Tümünü Kopyala

a:link, a:visited  {
    color: #fff;
    text-decoration: none;
}

a:hover, a:active {
    color: #000;
    text-decoration: none;
}

Now in order to make the animation affect on hover we should add the webkit animation code :

Kod: Tümünü Seç Tümünü Kopyala

-webkit-transition: all 250ms ease-in-out;
       -moz-transition: all 250ms ease-in-out;
       -o-transition: all 250ms ease-in-out;
        transition: all 250ms ease-in-out;

So we got the animation code and the question is where to add it ??

So we should add the code to the link code i.e : .a:link,.a:visited

Now the code looks like this after final styling :

Kod: Tümünü Seç Tümünü Kopyala

a:link, a:visited  {
    color: #fff;
    text-decoration: none;
          -webkit-transition: all 250ms ease-in-out;
       -moz-transition: all 250ms ease-in-out;
       -o-transition: all 250ms ease-in-out;
        transition: all 250ms ease-in-out;
}

a:hover, a:active {
    color: #000;
    text-decoration: none;
}

This produces the animation effect on hover with a slow transition/fading the links.

[Yurisa]

Thank You....