Steps to reproduce
According to the current editor’s draft of the CSS Animations specification, “changes to the values of animation properties while the animation is running apply as if the animation had those values from when it began.”
One simple way to demonstrate this is with short duration animation that sets the
background (for example) in the
100% keyframe. By default you’ll see that
background change briefly when the animation first completes, after which it will be set back to it’s initial value. If you subsequently change the
forwards, though, the changed
background value should take effect permanently.
This jsfiddle example demonstrates the issue. Clicking the checkbox alters the
animation-fill-mode to make that changed
background permanent. It works in Chrome and Firefox, but fails in Edge and Internet Explorer.
Note that this doesn’t just apply to the
animation-fill-mode property - I think most if not all animation properties should be dynamically changeable. It’s just easiest to demonstrate with
animation-fill-mode because it very obviously produces different results between working and non-working implementations.
In case you aren’t aware of the history, I should also point out that this behaviour differs from that specified in the last published working draft from 2013. It used to say: “The values used for the keyframes and animation properties are snapshotted at the time the animation starts. Changing them during the execution of the animation has no effect.” However, this was raised as a bug in November 2011, and the idea that animation properties should be changeable was agreed at the TPAC meeting in 2012. I think the exact details were only agreed to at the Sophia F2F in 2014, though, which is why it took so long for the change to make it into the spec.
Comments and activity
- Microsoft Edge Team
Changed Assigned To to “Ibrahim O.”
Changed Assigned To to “Rick J.”