Re: [animation] animation timing function in keyframe definitions

On Sun, Jul 12, 2015 at 5:34 PM, 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.

Keyframes are a kinda funky way to group together transitions of
individual properties.  They apply solely to the properties that are
specified inside of them.  For example, I could write something like:

@keyframes foo {
  0% { width: 0; height: 0; }
  50% { width: 80px; }
  100% { width: 100px; height: 100px; }
}

This defines three separate transitions:

1. {width, 0px to 80px, 0% to 50%}
2. {width, 80px to 100px, 50% to 100%}
3. {height, 0px to 100px, 0% to 100%}

animation-timing-function in a keyframe block just applies to the
transitions started in that block.  If you put it in an empty block,
there's nothing for it to apply to.

(If it implicitly affected everything, that would make it impossible
to apply different timing functions to different properties within a
single animation, which is a use-case we're explicitly allowing for
right now.)

~TJ

Received on Monday, 13 July 2015 16:53:45 UTC