Back to the intro page
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).
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
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.)