Re: [css3-animations] dynamic changes to animation properties or keyframes

On Fri, 02 Dec 2011 10:25:11 +0100, David Vest <davve@opera.com> wrote:

> On Thu, 1 Dec 2011 08:31:42 -0800, "Tab Atkins Jr."  
> <jackalmage@gmail.com> wrote:
>> On Thu, Dec 1, 2011 at 5:04 AM, Øyvind Stenhaug <oyvinds@opera.com>  
>> wrote:
>> > I can think of two main approaches. Using
>> >
>> > @keyframes name { foo }
>> > #test { animation: name 1s, name 2s }

animation: name 2s, name 1s;

>> > as an example:
>> >
>> > a) Behave similarly to
>> >
>> > @keyframes name1 { foo }
>> > @keyframes name2 { foo }
>> > #test { animation: name1 1s, name2 2s }

animation: name1 2s, name2 1s;

>> > b) Behave similarly to
>> >
>> > @keyframes name { foo }
>> > #test { animation: name-that-matches-no-at-rule 1s, name 2s }

animation: name-that-matches-no-at-rule 2s, name 1s;

>> > Where option a) seems kind of nice (can effectively have multiple  
>> animations
>> > re-using the same @keyframes rule).
>>
>> (a) is effectively equivalent to (b), since a later animation
>> manipulating the same property as an earlier animation wins.  The only
>> difference is when you're measuring the start or end of transitions
>> via the JS events.
>
> No, a previous animation may be visible during the animation-delay
> period:

Not just during the animation delay. I actually meant to specify the  
durations the other way around, as done above.

For the corrected alternative a), WebKit and Gecko are consistent: since  
there is no forward fill, name1 takes effect after name2 completes.

The spec is not actually very clear on this point, an issue which I raised  
at <http://lists.w3.org/Archives/Public/www-style/2011Sep/0388.html>.

-- 
Øyvind Stenhaug
Core Norway, Opera Software ASA

Received on Friday, 2 December 2011 10:43:46 UTC