We’re trying to transition the `opacity` property while fully hiding the invisible content from e.g. keyboard navigation with `visibility:hidden` (for the record, Safari 5.1 does allow to tab to links in `visibility:hidden` elements, while Firefox, Chrome and Opera don’t).
(Visible/invisible states are triggered by changing a class with JavaScript. Transition time is sluggish — 2 seconds — to make the browsers’s behaviors more obvious.)
Test link after the hidden content.
Summary: fade-in works, fade-out doesn’t.
Details: actually both fade-in and fade-out transitions work, but only the fade-in transition can be seen, because the visibility states are applied instantly. So the fade-out transition is happening while the element is not visible, and we get no visible animation.
But at least the transitions work in WebKit, and are not buggy in Firefox. So it’s already way better than using display.
Final note: if we want to use visibility:hidden but don’t want the hidden element to occupy some space in the page, we could use some absolute positioning as well. (Solution suggested by @iurevych.)