With the release of Safari 13.1, the Web Animations API now ships with all evergreen browsers.
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.
playbackrate, iterations, events, and more. Previously this might have been possible with extensive use of
requestAnimationFrame or the less efficient
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
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