随着Safari 13.1的发布，所有主流浏览器也都提供了Web Animations API支持。

早期的Web浏览器动画通常是使用JavaScript API创建的。这种方法很灵活，但难以让浏览器通过硬件加速来优化动画，也不能将其连接到布局和渲染管道。

2007年，WebKit团队引入了CSS Animations和CSS Transitions，并最终成为Web标准。这些API易于使用，并弥补了早期JavaScript动画的不足。

但是，CSS Animations和CSS Transitions存在一些限制，特别是在动态创建、回放控制和生命周期管理方面。

Web Animations API引入了一种解决方案，提供了CSS Animations和CSS Transitions的能力，同时还提供了JavaScript API的灵活性。Web Animations API通过计时模型和动画模型实现了对Web动画的编程控制。现在可以通过让JavaScript访问playbackrate、迭代、事件等来创建和控制动画，而之前一般使用requestAnimationFrame或效率较低的setInterval来实现。

现代浏览器（如Firefox、Safari）和所有基于Chrome的浏览器（如Chrome、Edge和Brave）都支持Web Animations。早期的浏览器可以借助web-animations-js和框架（如Dojo）来使用Web Animations API。

Web Animations规范为Web动画提供了一个共享模型，CSS Animations和CSS Transitions作为这个共享基础模型之上的层而存在。

所有主流浏览器都支持Web Animations的调试。Safari的Web Inspector在Timelines选项卡的媒体动画和动画时间轴中包含了动画。

Firefox动画检查器会沿着时间轴同步显示动画，提供了一个可拖动的小部件，你可以用它在时间轴上的任意点移动，并在该点查看页面。Firefox动画检查器可以显示使用Web Animations、CSS Animations和CSS @keyframes规则创建的动画。

基于Chrome的浏览器提供了Chrome DevTools动画检查器，开发者可以用它来查看和修改动画。Chrome动画检查器支持CSS Animations、CSS Transitions和Web Animations，但不支持requestAnimationFrame动画。

所有现代浏览器都提供了对原生Web Animations的支持和对开发人员的工具支持，JavaScript和Web开发人员可以快速高效地开发原生动画。尽管花了将近15年才达到这个成熟阶段，对于web平台来说仍然是一个重大的成就。

Web Animations是一个W3C工作草案推荐。开发人员可以通过W3C CSS工作组的GitHub代码库进行协作和反馈。

原文链接：

Web Animations API Now Supported in All Evergreen Browsers

创作场景

所有主流浏览器都已支持 Web Animations API