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 的說明文件。