Re: [css-animations] How animation-timing-function in keyframe rule interacts with direction

On Mon, Oct 20, 2014 at 11:02 AM, L. David Baron <> wrote:
> On Monday 2014-10-20 17:29 +0000, Sylvain Galineau wrote:
>> Added this animation-timing-function:
>>       # When specified in a keyframe, 'animation-timing-function' defines the progression of the
>>       # animation between the keyframe and the next keyframe in sorted keyframe selector order, or
>>       # the end of the animation if no other keyframe is defined. The specified timing function will
>>       # apply over this interval independently of the animation's current direction.
> Depending on the context, this may need to say explicitly that this
> "sorted keyframe selector order" is per-property and not for the
> entire animation.
> For example, if you have 0%, 25%, 50%, 75%, and 100% keyframes, and
> you specify 'transform' and 'animation-timing-function' in the 25%
> keyframe, and transform is omitted in the 50% keyframe and present
> in the 75% keyframe, then the 'animation-timing-function' from the
> 25% keyframe applies to 'transform' between the 25% and 75%
> keyframes.

Yeah, it might be worthwhile to be really explicit here, and define
things in a similar way to how Web Animations does - decompose a
@keyframes rules into a set of transition effects, each taking a
single property from one value to another over some time with some
timing function.  Then reversing the animation just moves through the
transition effects in reverse, and the proper behavior of timing
functions comes along for free at that point.


Received on Monday, 20 October 2014 18:20:05 UTC