W3C home > Mailing lists > Public > www-style@w3.org > August 2011

Re: [css3-animations] Effect of display:none and visibility:hidden on animations

From: Dean Jackson <dino@apple.com>
Date: Mon, 01 Aug 2011 13:46:45 -0700
Cc: www-style@w3.org
Message-id: <E98F5371-2462-42AD-B527-677AC787114C@apple.com>
To: Jonathan Snook <jonathan@snook.ca>

On 28/07/2011, at 10:22 PM, Jonathan Snook wrote:

> However, currently, non-transitionable properties are ignored. I'd like to suggest that this be changed and I'll give you a particular use case:
> 
>    div {
>        display:block;
>    }
> 
>    div.hidden {
>        display:none;
>        animation: slide-out 1s 1;
>    }
> 
> In this example, the hidden class is applied to a DIV via JavaScript. The problem is that by setting display:none, neither animations nor transitions will work. I would propose that non-transitionable values be allowed.
> 
> @keyframes slide-out {
>   0% { display:block; opacity: 1; }
>   100% { display:none; opacity:0; }
> }

I think if you set 100% { display: block; opacity: 0; } you'd get the effect you're looking for.

The spec should say that non-animatable properties in a keyframe value rule are applied (we agreed for transitions that non-animatable properties do actually change over time, at the end of the duration). If that's not the case then I'll fix it. If WebKit doesn't implement this then it's a bug too.

So basically, I think there is a workaround, but it might not be specified or implemented :) Hopefully others agree.

Dean
Received on Monday, 1 August 2011 20:47:12 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:42 GMT