Enhance Navigation User Experience by Using the CSS3 Transition Property

The way users experience your website is greatly influenced by the interactions users have with your website and how these interactions are perceived. These interactions span from page-loading interactions to just small effects when following conventional links. The following article how CSS Transitions can enhance the experience for visiting links.

CSS3 covers a nifty  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, such as on the header menu items (which will gradually hover to a red background). I hope I could have given you a glimpse of how to enhance navigation and link-hovering, and good luck web designing!