[css3-animations] animation-fill-mode: fractional iteration count, steps and animation-direction

The definition of this property needs a number of updates. 

The current editor's draft specifies that [1]:

# If the value for 'animation-fill-mode' is 'forwards', then 
# the animation will apply the property values defined in its 
# last executing keyframe after the final iteration of the animation, 
# until the animation style is removed. The last executing keyframe is 
# the 'to' or '100%' keyframe, unless the animation has 'animation-direction' 
# set to 'alternate' and both a finite and even iteration count, in which 
# case it is the 'from' or '0%' keyframe.

The prose is somewhat heavy at the moment. It is also incomplete given that 
animation-iteration-count takes a <number> i.e. if we have:

	animation-iteration-count:2.5;
	animation-fill-mode: forwards;

...I believe authors would expect the 'forward fill' to reflect the state of the
animation at the 50% mark. This is the first issue.

The second clarification can be explained using the following excerpt:

	animation-timing-function: steps(3, start);
	animation-direction: alternate;
	animation-iteration-count: 2;
	animation-fill-mode: forwards;

Per the 'unless' clause above:

# ...unless the animation has 'animation-direction' 
# set to 'alternate' and both a finite and even iteration count, in which 
# case it is the 'from' or '0%' keyframe.

...on completion, the forward fill would be the animations 0% keyframe. But the
interpolated state of the animation at 0% is really set by the first step of the 
step() timing function. 

Last, the prose also needs to be updated to reflect the new 'reverse' and 
'alternate-reverse' values of animation-direction [2].

Overall, the main point is that we may not want animation-fill-mode to 'freeze'
the animation at a particular set of keyframe values, but rather at the interpolated
state of the animation at whatever percentage/point on the time we resolve the fill
to be. Before I engage in the fun exercise of translating that into prose, I wanted
to check whether this made sense to everyone. 



[1] http://dev.w3.org/csswg/css3-animations/#animation-fill-mode-property
[2] http://dev.w3.org/csswg/css3-animations/#animation-direction-property

Received on Tuesday, 3 April 2012 23:59:38 UTC