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

Yes, you're absolutely right. I assumed that the default fill-mode was
'forwards'.

Are you proposing that the following constructs become valid as well:
@keyframes fade {
 10% { display:block; opacity: 1; }
 90% { display:none; opacity:0; }
}
and
@keyframes fade {
 10% { display:block; opacity: 1; }
 30% { display:none; opacity:0; }
 60% { display:block; opacity: 1; }
 90% { display:none; opacity:0; }
}

This would be most helpful, but it seems odd that an element has a running
animation and a style of 'display: none'.

Rik

Rik

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

>
> On 01/08/2011, at 2:16 PM, Rik Cabanier wrote:
>
> 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.
>
>
> But he has display:none; on the div.hidden rule.
>
> So basically the animation should run with display:block through all
> keyframes, then once it is done it reverts to the non-animated style where
> display is none.
>
> This could lead to some weird behaviour, such as if the animation had a
> delay. A lot depends on when exactly the animation starts. The spec is awful
> in these areas :(
>
> Dean
>
>
> 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
>>
>>
>>
>>
>
>