Web Animations API

Category: JavaScript
Type: New or changed feature
Status: Enabled by default (Chrome 84)
Intent stage: Prepare to ship

Breaking change: No
Enterprise impact: None
Spec maturity: Unknown status
Web Platform Tests: Yes

WPT details: https://wpt.fyi/results/web-animations * Tests functionality of the web animation API. https://wpt.fyi/results/css/css-animations * Tests interactions of CSS animations and the web-animations API https://wpt.fyi/results/css/css-transitions * Tests interactions of CSS transitions and the web-animations API

Summary

Update the web animations JavaScript API to align with the specifications in https://drafts.csswg.org/web-animations-1/. The Animation interface is extended to include support for promises, replaceable animations, and read-only access to the animation timeline. The Animatable and DocumentOrShadowRoot interfaces are expanded to support getAnimations. The KeyframeEffect interface is expanded to support compositing modes, getKeyframes, setKeyframes, and pseudoElement.

Standards & signals

Specification: https://drafts.csswg.org/web-animations-1/
Firefox: Shipped/Shipping — Supported in Firefox 75
Safari: Shipped/Shipping — Supported on Safari 13.1 macOS 10.14.
Web developers: Positive —
Tracking bug: http://crbug.com/978551

Ecosystem

Web Platform Tests: https://wpt.fyi/results/?q=web-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+Web%20Animations%20API
MDN Web Docs: https://developer.mozilla.org/en-US/search?q=Web%20Animations%20API
Baseline status: https://webstatus.dev/?q=Web%20Animations%20API

Docs: https://drafts.csswg.org/web-animations-1/

Samples: https://birtles.github.io/mozdev2019/ https://mozdevs.github.io/Animation-examples/

Explainers: https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API https://developer.mozilla.org/en-US/docs/Web/API/Animation/timeline https://developer.mozilla.org/en-US/docs/Web/API/EffectTiming/fill https://css-tricks.com/additive-animation-web-animations-api/ https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API

View on chromestatus.com