Enhance navigation and links using the CSS3 transition property

In the following quick tip I’ll explain something about using CSS3 transitions for navigation and hovering links.  Most of these quick tips are used in the M-Sign theme, which is used by this site and is available for download!

CSS3 covers a nifty new (well, relatively new) property which enables smooth transitions between different states of a styled element. Let’s say you have a certain div element which changes it background on hovering. Normally, there would be no transition and the background would be immediately changed on hovering. Using transition, we can have control on the speed of this transition (between unhovered and hovered state), the way it transits and how long the transition is delayed. In short, for all browsers an example:


div {
transition: all 2s ease-out 2s;
/* IE 10 */
-ms-transition:all 2s ease-out 2s;
/* Firefox 4+ */
-moz-transition:all 2s ease-out 2s;
/* Opera */
-o-transition:all 2s ease-out 2s;
/* Safari and Chrome */
-webkit-transition:all 2s ease-out 2s;
}


This transits all properties of the given element (div) during 2 seconds, the transition animation will easy out and the animation will start after two seconds. Basically, the shorthand is constructed likewise:


transition: || transition-property || transition-duration || transition-timing-function || transition-delay;


For more background on the transition properties, look at the W3schools page on css transitions.

So how can we apply this to enhance our navigation? Well, for example to add transition to link (a) selectors which change properties during hovering.
Let’s say a link change color, as in the following example:


a {
color: #777;
}
a:hover {
color: #F07;
}

Adding the following transition property will let this link gradually change color, but also e.g. a background if this was used (since the transition-property is set on ‘all’!):

a {
transition: all 1000ms ease-out;
-webkit-transition: all 1000ms ease-out;
-moz-transition: all 1000ms ease-out;
-ms-transition: all 1000ms ease-out;
-o-transition: all 1000ms ease-out;;
}


This transition will, in my belief, enhance the interactivity and experience of navigation little, and make it more ‘comfortable’ to hover links.The example is used within the top navigation menu of m-sign, but also for the subscribe links on the right of the header of this site. I hope I could have given you a glimpse of how to enhance navigation and link-hovering, and good luck webdesigning!