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