Question

Here is a fiddle for start: http://jsfiddle.net/kizu/A7QX9/

The problem: in Opera when you animate the transition for visibility property (usually along with the opacity) it’s not animated properly: the visibility is changed always at the end of transition, so when the block is appearing it’s not appearing smoothly.

So, the question: is there any CSS-only workaround for this Opera’s bug?

Answer 1

After I formulated the question and thought for a while, I’ve found the answer myself.

And came up with a solution.

So, going step-by-step:

1. Let’s look at the case when you need to show the block which is hidden at the start.
2. When you toggle the opacity and visibility with a transition, the block stays with visibility: hidden while the transition is in the run. So, you don’t need to use transition for visibility here.
3. But when you hide the block again, you need to toggle the visibility at the end of the transition, so you need the transition here apparently.
4. So, at the selector where the block is hidden you must have the transition for the opacity and in the selector where it’s shown, you don’t need the transition.

Here is a fiddle I’ve made with this solution: http://jsfiddle.net/kizu/A7QX9/1/