W3C home > Mailing lists > Public > www-style@w3.org > January 2013

[css3-animations] Clarifying the handling of repeated animation names

From: Sylvain Galineau <sylvaing@microsoft.com>
Date: Fri, 11 Jan 2013 18:54:23 +0000
To: "www-style@w3.org" <www-style@w3.org>
CC: "L. David Baron (dbaron@dbaron.org)" <dbaron@dbaron.org>
Message-ID: <3C4041FF83E1E04A986B6DC50F0178291BF3EBB2@TK5EX14MBXC221.redmond.corp.microsoft.com>
On Wednesday the WG briefly discussed David's recent post [1] regarding 
multiple occurrences of the same animation name in the animation shorthand.

It was resolved to allow the last specified instance of the animation 
to 'win' [2].

Further offline discussion with David regarding Firefox's handling of
this case suggested it might be helpful to go into more details into what
'winning' means. The spec currently covers this twice: 

   # If at one point in time there are multiple animations specifying 
   # behavior for the same property, the animation whose name occurs 
   # last in the value of 'animation-name' will override the other 
   # animations at that point. [3]

   # If multiple animations are attempting to modify the same property, 
   # then the animation closest to the end of the list of names wins. [4]

It seems there are at least two possible interpretations of these statements:

1. If the animation shorthand runs multiple animations against the same 
property, use 'last one wins' to decide which @keyframes rule animates
that property. Then only allow this one animation to update the property 
*regardless of the respective durations of the winning/losing animations*.

2. If the animation shorthand runs multiple animations against the same 
property, use 'last one wins' to decide which @keyframes rule animates
the property *first*. Once this animation has completed, use last-one-wins to
pick the next @keyframes rule to animate the property *among the losing 
animations that are still running*.

In other words, given:

<!doctype html>
	@keyframes rightward {
		to { margin-left: 600px;}
	#test {
		animation: rightward 10s, rightward 4s;
<p id="test">Moving right</p>

Interpretation #1 would run rightward for 4s. IE and WebKit do this.
Interpretation #2 would first run rightward for 4s, then run the last 6s of the 
10s rightward animation. Firefox does this.

While #1 is much simpler, I'm not sure this reflects author intent well. It may 
not even reflect the spec's original intent either; the first prose excerpt above 
specifically says the last animation wins *at that point in time*. In more 
complex cases involving multiple animations #1 means no animation can 'take over' 
the animation of a property once the winner completes. 

I strongly suspect #2 is what we want; from a syntactic standpoint I do find it 
awkward that animations 'run' a property from last to first but this is the 
compatible behavior today.


[1] http://lists.w3.org/Archives/Public/www-style/2013Jan/0054.html
[2] http://lists.w3.org/Archives/Public/www-style/2013Jan/0080.html
[3] http://dev.w3.org/csswg/css3-animations/#animations
[4] http://dev.w3.org/csswg/css3-animations/#animation-name-property
Received on Friday, 11 January 2013 18:55:28 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:25 UTC