W3C home > Mailing lists > Public > www-style@w3.org > June 2012

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

From: Sylvain Galineau <sylvaing@microsoft.com>
Date: Wed, 20 Jun 2012 00:01:19 +0000
To: "www-style@w3.org" <www-style@w3.org>
Message-ID: <3C4041FF83E1E04A986B6DC50F0178290AD34AEF@TK5EX14MBXC265.redmond.corp.microsoft.com>
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.


[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

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:39:00 UTC