Link color transitioning with css 3

One of my new favourite tools is css3. I love how for the tech savvy I can add a level of detail and luxury to a web page with no fallback problems for lesser browsers.

One of my current favourites is color transitioning in css3 for such things as links.

If you give it a go i’m sure you’ll agree with me, that it rules.

It’s also really incredibly simple!

First of all we start with a regular href tag and a :hover state declaration.

a{
   color:#000;
}
a:hover{color:#f00;}

Then we add our css3 transition, first of all just for webkit browsers.

a{
   color:#000;
   -webkit-transition:color 1s ease-in;
}
a:hover{color:#f00;}

Now we improve it by adding more extensive browser support.

a {
   color:#000;
   -webkit-transition:color 1s ease-in;
   -moz-transition:color 1s ease-in;
   -o-transition:color 1s ease-in;
   transition:color 1s ease-in;
}

And then you have it a simple transition from your main color to your hover state color. With no JS, jQuery or any other javascript libraries help.

Wicked, eh?