As far as I know, transitions currently work in Safari, Chrome, Firefox, Opera and Internet Explorer 10+.
This should produce a fade effect for you in these browsers:
a {
background-color: #FF0;
}
a:hover {
background-color: #AD310B;
-webkit-transition: background-color 1000ms linear;
-ms-transition: background-color 1000ms linear;
transition: background-color 1000ms linear;
}
<a>Navigation Link</a>
Note: As pointed out by Gerald in the comments, if you put the transition on the a
, instead of on a:hover
it will fade back to the original color when your mouse moves away from the link.
This might come in handy, too: CSS Fundamentals: CSS 3 Transitions