Fade-in / fade-out effects with CSS

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

• opacity only (works, fairly limited)
• opacity + display (buggy as hell)
• opacity + visibility (not buggy but still no good)
• opacity + JS-delayed `visibility (good but verbose JS solution)
• opacity + CSS-delayed visibility (verbose CSS solution)

All these tests are targetting the latest versions of Firefox, Chrome, Safari and Opera.