- 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