CSS 3 Transitions with Opacity - Chrome and Firefox?

I've had all sorts of issues with this. It's a really bad part of the CSS3 transitions specification because the spec says nothing about this type of behavior.

I've had all sorts of issues with this. It's a really bad part of the CSS3 transitions specification because the spec says nothing about this type of behavior. The predictable way to do this is: Set initial state of object.

Set transition related CSS3 on the object. Object must not be display: none at this point. Let browser return to event loop and repaint anything that needs repainting to establish pre-animation state.

Then add a class to the object that sets the final state and triggers the animation. Return to browser event loop for the animation to take place. The unpredictable way to do this is: Anything involving display: none in any of the states.

Set intital state and CSS3 transition rules Set final state without letting browser go back to the event loop. Go back to event loop (often times the CSS3 transition will not go). I see value in being able to change a whole bunch of properties at once programmatically without triggering the start of the CSS3 transition.

But, it is not unusual that you want to establish the initial state with a bunch of code, programmatically set up the transition you want to have happen and then set the final state all in one piece of code. Today, you can't do that and get reliable behavior. You will have to insert some setTimeout calls in the middle.

What would be nice would be to have a synchronous function call for setting the initial state that would say to the browser: OK, I'm doing setting the initial state of this object. Any changes I make from now on, I want you to include in the CSS3 transitions I have set. Then, you wouldn't need the extra setTimeout non-sense.

Your example shows this type of thing. You could make it work without the setTimeout by having your initial state be opacity: 0; instead of display: none;, though I realize that may not be what you want. Then, the initial state (without display: none) would be seen by the browser before you establish the final state and the transition should work.

I couldn't mark it as just opacity: 0 as the overlay covers the entire screen and I wanted to leave it in the DOM between showing. You're right though, display: none was the issue. Shifting it off to the left corrects the issue.

Bit annoying as display: none seems much more like the correct thing to do in this case. – Steve Elliott Jul 16 at 15:18.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.