隨著 Safari 13.1 的發(fā)布，所有主流瀏覽器也都提供了Web Animations API支持。

　　早期的 Web 瀏覽器動畫通常是使用 JavaScript API 創(chuàng)建的。這種方法很靈活，但難以讓瀏覽器通過硬件加速來優(yōu)化動畫，也不能將其連接到布局和渲染管道。

　　2007 年，WebKit 團隊引入了CSS Animations和CSS Transitions，并最終成為 Web 標準。這些 API 易于使用，并彌補了早期 JavaScript 動畫的不足。

　　但是，CSS Animations 和 CSS Transitions 存在一些限制，特別是在動態(tài)創(chuàng)建、回放控制和生命周期管理方面。

　　Web Animations API 引入了一種解決方案，提供了 CSS Animations 和 CSS Transitions 的能力，同時還提供了 JavaScript API 的靈活性。Web Animations API 通過計時模型和動畫模型實現(xiàn)了對 Web 動畫的編程控制。現(xiàn)在可以通過讓 JavaScript 訪問 playbackrate、迭代、事件等來創(chuàng)建和控制動畫，而之前一般使用 requestAnimationFrame 或效率較低的 setInterval 來實現(xiàn)。

　　現(xiàn)代瀏覽器（如 Firefox、Safari）和所有基于 Chrome 的瀏覽器（如 Chrome、Edge 和 Brave）都支持 Web Animations。早期的瀏覽器可以借助web-animations-js和框架（如 Dojo）來使用 Web Animations API。

　　Web Animations 規(guī)范為 Web 動畫提供了一個共享模型，CSS Animations 和 CSS Transitions 作為這個共享基礎(chǔ)模型之上的層而存在。

　　所有主流瀏覽器都支持 Web Animations 的調(diào)試。Safari 的 Web Inspector 在 Timelines 選項卡的媒體動畫和動畫時間軸中包含了動畫。

　　Firefox 動畫檢查器會沿著時間軸同步顯示動畫，提供了一個可拖動的小部件，你可以用它在時間軸上的任意點移動，并在該點查看頁面。Firefox 動畫檢查器可以顯示使用 Web Animations、CSS Animations 和 CSS @keyframes 規(guī)則創(chuàng)建的動畫。

　　基于 Chrome 的瀏覽器提供了Chrome DevTools 動畫檢查器，開發(fā)者可以用它來查看和修改動畫。Chrome 動畫檢查器支持 CSS Animations、CSS Transitions 和 Web Animations，但不支持 requestAnimationFrame 動畫。

　　所有現(xiàn)代瀏覽器都提供了對原生 Web Animations 的支持和對開發(fā)人員的工具支持，JavaScript 和 Web 開發(fā)人員可以快速高效地開發(fā)原生動畫。盡管花了將近 15 年才達到這個成熟階段，對于 web 平臺來說仍然是一個重大的成就。

　　Web Animations是一個 W3C 工作草案推薦。開發(fā)人員可以通過 W3C CSS 工作組的GitHub 代碼庫進行協(xié)作和反饋。

　　原文鏈接：Web Animations API Now Supported in All Evergreen Browsers

總結(jié)

以上是生活随笔為你收集整理的所有主流浏览器都已支持 Web Animations API的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。