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.)
Dummy content: No living truth can be reduced to a sentence; such a sentence would be, at best, the passport that gives entrance to a foreign country, which you then still need to discover. And you end up thinking that you can only tackle essential things in roundabout ways, or diagonally — almost on the sly.
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.
Opera 11.52:
does fade-in and fade-out transitions alright. The fade-out transition is not shown since the element will be display:none. Opera manages the change from fade-out to fade-in quite nicely. If you click the hide/show buttons quickly, the fade-out does not complete so Opera starts the fade-in transition from the current opacity value. Good job.
(Before you think Opera’s CSS Transitions implementation is great, you should try transitioning all properties though: if you do that, when displaying the element for the first time all sorts of strange shit happens!)
Firefox 9:
no fade-in transition. There’s a fade-out transition, which Firefox tries to complete if you try to trigger the fade-in transition. What you get when clicking the buttons quickly (hide then show) is this: the element appears, slowly goes to opacity:0, then instantly at opacity:1. Awful bug.
Chrome 15 / Safari 5.1:
no transition at all. Simple.