Your browser may have trouble rendering this page. See supported browsers for more information.

|<<>>|62 of 273 Show listMobile Mode

W3C Web Animations

Published by marco on

Updated by marco on

The Web Animations Working Draft (W3C) was published in October of 2018. Can I use “Web Animations” (CanIUse) shows that the only browser that supports this API 100% is the latest technology preview on iOS and MacOS. Chromium-based browsers have had (very) basic support for quite some time, but Safari has thrown down the gauntlet with full support, which I learned about from Web Animations in Safari 13.1 by Antoine Quint (WebKit Blog).

This API is intended to replace many usages of CSS Animations and CSS Transitions, which are not only somewhat verbose and unwieldy for even simple cases, but are also not efficient in that each animation tends to force itself to start, artificially interrupting the browser as it prepares a page. With the Web Animations API, a page can much more declaratively indicate its intent without force-calculating animation target values, as is required now with CSS Animations.

A page can create and launch animations, but it can also get a reference to that animation and change it on-the-fly afterward. You can play it, pause it, change the play position, the play state, hook into the animation lifecycle with a Promise-based API, and much more. A page can even get all of the animations associated with an element or the entire document and manipulate them wholesale. Safari’s new inspector uses this API to offer much richer display and control of all running animations. Understandably, Safari has reimplemented CSS Animations and CSS Transitions on top of a whole new animation engine that the Web Animations API also controls.

Safari puts a very strong implementation forward, with only two features missing:

  • SVG Animations are not running on the new engine yet and cannot be manipulated with the API
  • Effect composition (W3C) is not yet supported