When a fill forward animation finishes, it remains in effect. If enough of these animations build up, they can negatively impact performance and leak memory. There are 3 main parts to this feature: 1) Automatically remove animations that no longer contribute to the effect stack and fire remove events. 2) Animation.persist() to force an animation to remain that would otherwise be removed. 3) Animation.commitStyle() to inject an inline style based on the current property values.
Fill forward animations remain active even after the animation enters the finished state, which can lead to a memory leak and performance degradation. To alleviate this problem, spec changes were introduced (https://drafts.csswg.org/web-animations-1/#replacing-animations) to flag and remove animations that no longer contribute to the effect stack. This replacement process minimizes the impact of creating animations with fill != none. The CommitStyle method ensures that effects that previously required fill modes can be replicated in a more performance manner. The CommitStyle method effectively deprecates the need for setting a fill mode even for additive effects. The persist method provides a means to safeguard an animation from being automatically removed once flagged as replaceable.
Docs: https://drafts.csswg.org/web-animations/#replacing-animations
Samples: wpt/web-animations/interfaces/Animation/commitStyles.html wpt/web-animations/interfaces/Animation/style-change-events.html wpt/web-animations/interfaces/Animation/persist.html
Explainers: https://developer.mozilla.org/en-US/docs/Web/API/EffectTiming/fill#Alternatives_to_fill_modes