Web Animations API 提供強大的基元，可以描述 JavaScript 的命令式動畫，但這是什麼意思？ 瞭解您可以使用的資源，包括 Google 的示範和程式碼研究室。
背景
API 為核心提供 Element.animate() 方法。
讓我們來看看一個從紅色到綠色的背景色彩動畫：
var player = document.body.animate(
[{'background': 'red'}, {'background': 'green'}], 1000);
所有新式瀏覽器都支援這種方法，同時有絕佳的 polyfill 備用值 (稍後會詳細說明)。 自 Chrome 39 版以來，我們已廣泛支援這個方法及其玩家物件。 Google Cloud SQL 也可直接使用 Opera，同時也正在針對 Firefox 進行積極開發。 有了這款強大的原始功能，就有機會在工具箱中發揮一席之地。
程式碼研究室
越來越多的程式碼研究室適用於 Web Animations API。 這些是自修指南，示範不同的 API 概念。 在大部分這些程式碼研究室中，您將取得靜態內容，並利用動畫效果加以強化。
如要瞭解網頁動畫中可用的新基本功能，建議從這些程式碼研究室和相關連結或資源著手。 如果想知道可以建構什麼內容，請查看這個 Android 啟發的公開特效。
如果您才剛開始起步，請盡力而為！
示範
如要尋找靈感，請務必查看 GitHub 上代管的來源，查看以 Material 為靈感的網路動畫示範。 上述功能示範各種令人驚豔的效果，而且您可以透過內嵌方式查看每個示範的原始碼。
其中的內容包括彩色旋轉銀河系、旋轉地球，或甚至是純粹的舊元素各種效果。
聚合物
為了確保在所有新式瀏覽器中都能提供絕佳支援，我們可以使用 polyfill 程式庫。 Web Animations API 目前可提供 polyfill，可搭配 Internet Explorer、Firefox 和 Safari 等所有新型瀏覽器使用。
喜歡嘗鮮嗎？不妨使用網頁動畫的下一個 Polyfill，也可以利用其中一些尚未確定的功能，例如可組合的 GroupEffect 和 SequenceEffect 建構函式。
如需兩種 polyfill 的比較，請參閱首頁。
如要在程式碼中使用 polyfill，有幾種方式可以選擇。
使用 cdnjs、jsDelivr 等 CDN，或是透過 rawgit.com 指定特定版本。
透過 NPM 或 Bower 安裝
$ npm install web-animations-js $ bower install web-animations-js ```
無論是哪種情況，您只要在指令碼標記中把 polyfill 加到其他程式碼之前即可-
<script src="https://cdn.jsdelivr.net/web-animations/latest/web-animations.min.js"></script>
<script>
document.body.animate([
{'background': 'red'},
{'background': 'green'}
], 1000);
</script>
其他資源
如要參閱更多技術簡介，請查看 W3C 規格。
Dan Wilson 也發表了一系列有關網路動畫的文章，包括如何與新的 CSS motion-path 屬性搭配使用。
如需使用 motion-path 的一些範例，請參閱 Eric Willigers文件。