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 `display:none`.

(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: don’t even think of using CSS transitions with display. Since we’re only transitioning the opacity property, in all cases the display (block/none) is applied immediately. This means even if the fade-out transition happens, it can’t be shown because the element is already at display:none.