MDN https://developer.mozilla.org/en-US/docs/Web/API/Animation/commitStyles says:

"The commitStyles() method of the Web Animations API's Animation interface commits the end styling state of an animation to the element being animated, even after that animation has been removed. It will cause the end styling state to be written to the element being animated, in the form of properties inside a style attribute."

This is exactly what I want and I like the example in which commitStyles() is called right after the animation is created. The expected behavior is very clear since the end state of an animation is well-defined

To my surprise this is not the case in Chrome 84. Looking at the spec it seems MDN got it wrong:

https://drafts.csswg.org/web-animations/#dom-animation-commitstyles says:

"Writes the current effect values produced by this animation’s animation effects to their corresponding effect targets' inline style using the commit computed styles procedure."

So an animation of transform: translate(100px), duration: 1000 may record a translation of anywhere between 0 and 100px depending on when commitStyles() is called. Sure calling it after the animation finishes insures the end state is written but seems to also require setting fill: forwards. It just seems much easier and more intuitive to have it record a predictable state no matter when it's called

Could commitStyles() have an option to always record the end state preferably without involving the fill property? Even better could it become an animation property and I wouldn't have to use fill at all?