Update: 2011-11-08
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?
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
(good but verbose HTML+CSS solution)
All these tests are targetting the latest versions of Firefox, Chrome, Safari and Opera. CSS Transitions support is expected in IE10 (not tested yet).