Replaceable animations

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.

Demos

Documentation

Specification

Editor's draft

Status in Chromium

Blink>Animation


Behind a flag (tracking bug) in:

  • Chrome for desktop release 83
  • Chrome for Android release 83
  • Android WebView release 83

Consensus & Standardization

After a feature ships in Chrome, the values listed here are not guaranteed to be up to date.

  • Shipped
  • No public signals
  • Shipped
  • No signals

Owner

Last updated on 2020-06-17