Fade-in / fade-out effects with CSS

Florens Verschelde

A common webdesign need is to show and hide elements with fade-in and fade-out effects. This is commonly done using JavaScript to manipulate the value of the opacity CSS property of elements over time.

CSS transitions were designed to remove the reliance on JavaScript for transitioning between values, but do they actually work well for our fade-in/fade-out needs?
Hmm, somewhat?

A few tests

All these tests are targetting the latest versions of Firefox, Chrome, Safari and Opera. CSS Transitions support is expected in IE10 (not tested yet).