CODEWITHSUNDEEP
firefoxcsswebkitopacitycss-transitions
Nix
Nix

Reputation: 5998

Using CSS3 to animate opacity with display:none

I have an element, with a child container which is initially hidden. When I hover over the parent, the child should be displayed. Simple.

Now, for real browsers, I want to add some flair and have the child fade in — while still keeping basic functionality for non-CSS3 compliant browsers. For old browsers, I simply toggle display, while I animate the opacity for all the kids with cool browsers. Should be a simple operation, right?

To my great surprise and disappointment, this is kind of buggy.

In Firefox, when I hover on, the child element switches to being fully opaque, before fading out. But hey, I want it to start as fully transparent, and then fade in!

In Webkit, the animation does not trigger — only the display toggle.

In IE (including IE10 PP) it also simply toggles display (as expected, though I had hoped it would animate in IE10).

In Opera everything works swell. <3 <3

Now, if I remove the display:none; from the initial declaration, the animation works beautifully in Fx, but then I will have problems with uncool browsers, which is sadly predominant among the visitors of this particular project.

Since I possess the powers of Modernizr, I can simply make a conditional style so that I use the display toggle only on the silly browsers, and life is great again, but the question remains:

Is this a bug in Fx/Webkitz, or is it intentional?

Here's a fiddle for you to look at: http://jsfiddle.net/TheNix/q5bAZ/4/

Upvotes: 2

Views: 890

Answers (2)

Boris Zbarsky
Boris Zbarsky

Reputation: 35064

The problem is that transitions happen on computed value changes, and browsers don't compute values for most properties when display: none is set.

There is some ... lively discussion about what the spec should say about this. See the thread starting http://lists.w3.org/Archives/Public/www-style/2011Dec/0353.html and going over the last 4 months or so.

Upvotes: 4

Christoph
Christoph

Reputation: 51201

Simply omit the display declaration and add 

-moz-opacity: 0.5;
-khtml-opacity: 0.5;
filter: alpha(opacity=x); // x =  0 ... 100.

Now with targeting the IEs and other older browsers, you should be fine.

If you want to be extra-accurate you put the filter into an extra IE-stylesheet so you don't invalidate your stylesheet with stupid IE-stuff. ( But with proprietary prefixes only xD )

Upvotes: 0

Related Questions