CSS transition on an initially hidden elemement

Question

I would like to make a css transition on an element which has display: none set. Consider the following code:

Answer 1

display:none jacks up the animation. It's a shame and I think should be addressed by browsers. I've gotten around the problem before by setting a z-index to -1, which hides the element, and if absolutely positioned also removes it from the static layout. You can actually transition z-index (though it doesn't really look like animate), therefore doesn't mess up the opacity animation.

This worked for me on my application, although I eventually had to use JavaScript to go ahead and set the display property from none to block because I eventually needed to use the fading element in a overflow:auto element, which when it wasn't hidden, created scroll bars at undesired times.