随着 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 代码库进行协作和反馈。
原文链接：
评论