W3C home > Mailing lists > Public > www-style@w3.org > July 2015

[animation] animation timing function in keyframe definitions

From: Estelle Weyl <estelle@weyl.org>
Date: Sun, 12 Jul 2015 17:34:34 -0700
Message-Id: <A120CF7E-00B5-4CD1-9465-E4FE54E2FC74@weyl.org>
To: www-style list <www-style@w3.org>
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

This archive was generated by hypermail 2.4.0 : Friday, 17 January 2020 22:52:18 UTC