Re: [css-animations] Keyframes appearing more than once in animation-name

On 2016/05/05 4:11, Simon Fraser wrote:
> A bug was filed on WebKit showing incorrect behavior in an animation
> test case[1] which repeats the same keyframes in comma-separated
> animation-name, like:
>
>   animation-name: a, b, a, b;
>   animation-duration: 1s, 1s, 1s, 1s;
>   animation-delay: 0s, 2s, 4s, 6s;
>   animation-fill-mode: forwards, forwards, forwards, forwards;
>
> @keyframes a {...}
> @keyframes b {...}
>
> I don't think the spec[2] has enough information to describe whether
> this should work in the static case, and what happens in the face of a
> change in the value.
>
> In the example above, it's clear what the author wants, and it works in
> Chrome and FF. However, what happens when the value of animation-name
> changes? For example, if it changed to "a, a, b, b" in the example
> above, which animations would keep running?

There is an open issue for this[1] and some discussion from TPAC last 
year.[2][3]

The proposal is that when we come to perform updates we compare the 
existing and updated 'animation-name' lists and match up the names 
starting from the end of each list.

When we get a match we update the existing animation and then no longer 
consider that existing animation for subsequent matches.

So, in the above case you'd have:

   #1: a 1s 0s forwards
   #2: b 1s 2s forwards
   #3: a 1s 4s forwards
   #4: b 1s 6s forwards

Setting animation-name: a, a, b, b would give you:

   #1: a 1s 0s forwards
   #3: a 1s 2s forwards
   #2: b 1s 4s forwards
   #4: b 1s 6s forwards

The numbers here represent the object identities of the animations. In 
this case no new animations are generated here; the existing animations 
are updated. I made a codepen that demonstrates that behavior in Firefox 
Nightly/DevEdition using the getAnimations() API.[4]

Best regards,

Brian

[1] https://github.com/w3c/csswg-drafts/issues/69
[2] https://lists.w3.org/Archives/Public/www-style/2015Oct/0226.html item 5
[3] https://lists.w3.org/Archives/Public/www-style/2015Nov/0308.html
[4] http://codepen.io/anon/pen/VagQzV

Received on Monday, 9 May 2016 03:06:25 UTC