Fading effects without Javascript
One of the most popular tools of UI design in recent years is to utilise Javascript for smooth fading effects and transitions. Previously this was either limited to choppy CSS hover effects, or to third party technologies like Flash. Neither of these solutions is particulary beautiful.
With Javascript animation libraries and frameworks like Scriptaculous and jQuery it became easy to produce smooth colour transitions or animated manipulations of element dimensions. With CSS3, UI enhancements like fading can be done with pure CSS, without the need for Javascript.
The transition property
One of the most powerful new attributes CSS3 introduces is transition. According to the specification, the purpose of transition is
to enable implicit transitions, which describe how CSS properties can be made to change smoothly from one value to another over a given duration
What’s so great about that, is, almost any CSS property can be used in animations: position properties, visibility, dimensions, colours and so on. There is a list of supported properties at the end of the spec document.
Demo: a simple submenu
A submenu like it is found on countless websites can easily look more attractive with a bit of fading. A simple list of links, each with a background colour, and on mouseover the background colour changes. With normal CSS hover, the hover state is rendered instantly. With transition enabled, it will fade smoothly to the new value, providing a more appealing experience.
In this demo, transition: all 0.2s ease-in-out simply means that all properties that have changed in the :hover state should be animated (background colour, text colour and text shadow), using a 0.2 seconds long animation and with easing. I recommend reading the specification, as it contains information about many details not mentioned here, including the available easing functions, timing and combination of properties.
Browser support
Most of the latest browsers (except Firefox 3.6 and of course, IE) already support CSS3 transitions, but it is wise to use all the different vendor prefixes like in the demo. The good thing is, even if a browser doesn’t support it, in most cases it will simply fall back and render the result instantly without an animation. Therefore there is usually no reason not to use it.