CSS animation-composition property

Category: CSS
Type: Chromium catches up
Status: Enabled by default (Chrome 112)
Intent stage: Prepare to ship

Breaking change: No
Enterprise impact: None
Chromium flag: CSSAnimationComposition
Spec maturity: Working draft
Web Platform Tests: Yes

WPT details: https://wpt.fyi/css/css-animations/KeyframeEffect-getKeyframes.tentative.html https://wpt.fyi/css/css-animations/animation-composition.html https://wpt.fyi/css/css-animations/animation-composition-keyframes.html

Summary

Implement animation-composition property. Allows to specify the composite operation to use when multiple animations affect the same property simultaneously.

Standards & signals

Specification: https://w3c.github.io/csswg-drafts/css-animations-2/#animation-composition
Firefox: Shipped/Shipping — behind the flag
Safari: Shipped/Shipping
Web developers: No signals
Tracking bug: https://bugs.chromium.org/p/chromium/issues/detail?id=1342699

Ecosystem

Web Platform Tests: https://wpt.fyi/results/?q=css%2Fcss-animations
Chrome Platform Showcase: https://chrome-platform-showcase.paulkinlan-ea.deno.net/features
GenDN reference: https://gendn.paulkinlan-ea.deno.net/features
chrome.dev demos search: https://www.google.com/search?q=site%3Achrome.dev+CSS%20animation-composition%20property
MDN Web Docs: https://developer.mozilla.org/en-US/search?q=CSS%20animation-composition%20property
Baseline status: https://webstatus.dev/?q=CSS%20animation-composition%20property

View on chromestatus.com