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

Hi Dean,

I think Jonathan was looking for a solution that removes the DIV from the
flow. Setting opacity to 0 will not remove the object so it will still take
up space and be part of the page's layout.
If you have a lot of animations, this causes significant slowdowns.

Rik

On Mon, Aug 1, 2011 at 1:46 PM, Dean Jackson <dino@apple.com> wrote:

>
> 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
>
>
>
>