With the release of Safari 13.1, the Web Animations API now ships with all evergreen browsers.
Early animations in web browsers were typically created with JavaScript APIs. This approach was flexible but could not easily allow browsers to optimize animations with hardware acceleration or hooks into the layout and rendering pipeline.
CSS Animations and CSS Transitions were first introduced by the WebKit team in 2007 and eventually became web standards. These APIs are easy to use and overcome the challenges of early JavaScript animation implementations.
However, CSS animations and transitions have known limitations, particularly around the dynamic creation of animations, controlling the playback of animations, and monitoring the lifecycle of an animation.
The Web Animations API introduces a solution that gives the optimization power of CSS animations and transitions, but the flexibility of earlier JavaScript-based APIs. The Web Animations API provides programmatic control over web animations via a timing model and animation model. Animations get created and controlled via JavaScript with access to playbackrate, iterations, events, and more. Previously this might have been possible with extensive use of requestAnimationFrame or the less efficient setInterval.
Today's modern browsers such as Firefox, Safari, and all Chromium-based browsers such as Chrome, Edge, and Brave now natively support Web Animations. Earlier browsers can leverage the Web Animations API with the web-animations-js shim, and frameworks like Dojo leverage this shim for non-evergreen web animations support.
The Web Animations specification provides a shared model for animations on the web. CSS Transitions and CSS Animations exist as layers above that shared foundational model.
Debugging web animations is supported in all evergreen browsers. Safari's Web Inspector includes animations in the Media & Animations timeline in the Timelines Tab.
The Firefox Animation inspector displays animations synchronized along a timeline, including a draggable widget you can use to move to any point in the timeline and see the page at that point. The Firefox animations inspector shows animations created with Web Animations as well as CSS animations and CSS @keyframes rules.
Chromium-based browsers include the Chrome DevTools Animation Inspector, allowing developers to inspect and modify animations. The Chrome Animation Inspector supports CSS animations, CSS transitions, and web animations, but does not support requestAnimationFrame animations.
With native Web Animations support and developer tool support available in all modern browsers, JavaScript and web developers have fast, efficient, and native animations support available. While it took nearly 15 years to reach this point of maturity, this is a significant achievement for the web platform.
Web Animations is a W3C working draft recommendation. Collaboration and feedback is encouraged via the W3C CSS Working Group GitHub repo.