Re: [animation] animation timing function in keyframe definitions

Hi Estelle,

The specification is very unclear on correct behavior here. However, I
suspect all implementations have taken this:

"If a 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." (from
http://dev.w3.org/csswg/css-animations/#keyframes)

And applied the conceptual splitting before resolving
animation-timing-function references. In the case of your example, that
would mean that the 50% keyframe "doesn't exist" for width, and therefore
the animation timing function change doesn't apply.

We should definitely clarify the specification. Absent a strong reason
otherwise, this is likely going to end up matching current implementations.

Cheers,
    -Shane Stephens

On Mon, Jul 13, 2015 at 10:37 AM Estelle Weyl <estelle@weyl.org> wrote:

> This impacts the animation timing function:
>
> @keyframes width {
>   0% {
>   width: 500px;
>   }
>   50% {
>        width: 300px;
>   animation-timing-function: ease-in;
>   }
>   100% {
>   width: 100px;
>   }
> }
>
> The following does not (as tested in FF and Chrome) — the
> animation-timing-function does not change at the 50% mark:
>
> @keyframes width {
>   0% {
>   width: 500px;
>   }
>   50% {
>   animation-timing-function: ease-in;
>   }
>   100% {
>   width: 100px;
>   }
> }
>
> The spec:
> http://dev.w3.org/csswg/css-animations/#animation-timing-function
> Example:
> http://codepen.io/estelle/pen/pJVMpL (with width declared - works)
> http://codepen.io/estelle/pen/XbqvVy (without width - doesn’t work)
>
> I don’t see in the spec that the browser implementation is normal
> behavior. I would expect the animation-timing-function value to change at
> the 50% mark whther or not an animatable property is declared within that
> keyframe.
>
> -Estelle
>