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

On Jun 19, 2012, at 5:01 PM, Sylvain Galineau <sylvaing@microsoft.com> wrote:

> 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?

Agree.

Simon

Received on Tuesday, 10 July 2012 21:24:13 UTC