If you haven’t used CSS3 transitions yet, you should start using them. The syntax is one of the easiest out there, and it will soon be cross-browser compatible. IE 9 has announced support for transitions, and Firefox 4.0 will support it as well. You can currently view the effect in Safari 5.0 and Chrome.
Implementation
Adding CSS3 transitions to your anchor tags is really quite simple. Most people make the mistake of adding them to the a:hover selector. Using this method animates only on the mouse over, not the mouse out. What you want to do is apply it to the a selector alone. The following code is how I typically add CSS3 transitions. This is actually the shorthand version of the transition property. For the non-shorthand, check out the W3C Module on CSS Transitions.
a {
-webkit-transition:all .4s ease-in-out;
-moz-transition:all .4s ease-in-out;
-o-transition:all .4s ease-in-out;
transition:all .4s ease-in-out;
}
Target Specific Properties
This will apply transitions to all properties of the a tag that are changed on hover. It provides support for Firefox, Opera, Webkit and includes the future-proof transition. If you wanted to transition a single property, it’s as easy as changing “all” the whatever property you wish to target.
a {
-webkit-transition:color .4s ease-in-out;
-moz-transition:color .4s ease-in-out;
-o-transition:color .4s ease-in-out;
transition:color .4s ease-in-out;
}
Easing and Duration
This will add transitions only to the color of the a tag. The .4s following the property is the duration of the transition. I find .3s-.4s to be ideal for adding subtle transitions to your site. Using longer durations can be used on things like menus that would typically use Javascript or jQuery for animations. Finally, ease-in-out of course refers to the easing effect that will be applied to the transition. Once again, the full list of available easing effects can be found at the W3C Transition Module.
Example
Color Transition
a.transition {
-webkit-transition:all .4s ease-in-out;
-moz-transition:all .4s ease-in-out;
-o-transition:all .4s ease-in-out;
transition:all .4s ease-in-out;
}
<a class="transition" href="#">Color Transition</a>