隨着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代碼庫進行協作和反饋。
原文鏈接：