[css3-animations] Interaction of timing functions specified in a keyframe with properties defined in other keyframes

Currently, the specification defines how to handle the animation of properties 
that are only specified in some keyframes [1]:

# If property is not specified for a keyframe, or is specified but invalid, 
# the animation of that property proceeds as if that keyframe did not exist. 
# Conceptually, it is as if a set of keyframes is constructed for each property 
# that is present in any of the keyframes, and an animation is run independently 
# for each property.

(Yes, we're missing a 'the' at the beginning; will fix shortly)

As for specifying animation-timing-function in a keyframe rule [2] :

# An 'animation-timing-function' defined within a keyframe block applies to 
# that keyframe, otherwise the timing function specified for the animation is used.

Given this, what should happen for the top and left properties in this example:

	@keyframes southeast {
	    0%     { left: 100px; top: 100px; animation-timing-function: linear; }
	    50%    { left: 200px; animation-timing-function: ease; }
	    100%   { left: 100px; top: 200px; } 
	}

My reading of both these clauses is that top should animation from 100px to 200px using a linear
timing function the entire way; left would use linear from 100px to 200px then ease from 200px
back to 100px.

Agree/disagree?


[1] http://dev.w3.org/csswg/css3-animations/#keyframes
[2] http://dev.w3.org/csswg/css3-animations/#animation-timing-function-property

Received on Wednesday, 20 June 2012 00:01:52 UTC