[animation] animation timing function in keyframe definitions

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 <http://dev.w3.org/csswg/css-animations/#animation-timing-function>
Example: 
http://codepen.io/estelle/pen/pJVMpL <http://codepen.io/estelle/pen/pJVMpL> (with width declared - works)
http://codepen.io/estelle/pen/XbqvVy <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

Received on Monday, 13 July 2015 00:35:10 UTC