Web Animations API は、JavaScript から命令型アニメーションを記述するための強力なプリミティブを提供します。しかし、これはどういう意味なのでしょうか？Google のデモやコードラボなど、利用可能なリソースについてご確認ください。
背景
この API は、主に Element.animate() メソッドを提供します。背景色を赤から緑にアニメーションする例を見てみましょう。
var player = document.body.animate(
[{'background': 'red'}, {'background': 'green'}], 1000);
このメソッドはすべての最新ブラウザでサポートされており、優れたポリフィル フォールバックがあります（詳しくは後述）。このメソッドとそのプレーヤー オブジェクトのネイティブ サポートは、Chrome 39 の一部として広く利用できるようになりました。Opera ではネイティブに利用可能で、Firefox 向けには開発が進行中です。これは、ツールボックスに含める価値のある強力なプリミティブです。
Codelab
Web Animations API で利用できる Codelab の数が増えています。API のさまざまなコンセプトを示すセルフペースのガイドです。これらの Codelab のほとんどでは、静的コンテンツを取得してアニメーション効果で強化します。
Web アニメーションで利用できる新しいプリミティブについて理解したい場合は、これらの Codelab と関連リンクやリソースから始めるのが最適です。作成できるものの例として、Android をイメージした表示効果をご覧ください。
これから始める方は、ぜひご活用ください。
デモ
インスピレーションをお探しの方は、マテリアルにインスパイアされた Web アニメーションのデモ（ソースは GitHub でホスト）をぜひご覧ください。これらはさまざまな素晴らしい効果を示しており、各デモのソースコードをインラインで表示できます。
デモには、カラフルな回転する銀河、回転する地球、または単にさまざまな効果をプレーンな要素に適用したものなどがあります。
ポリフィル
すべての最新ブラウザで優れたサポートを確保するには、ポリフィル ライブラリを使用します。Web Animations API には、Internet Explorer、Firefox、Safari などの最新のすべてのブラウザに対応するポリフィルが現在提供されています。
冒険心があるなら、web-animations-next ポリフィルを使用できます。これには、コンポーザブルな GroupEffect コンストラクタや SequenceEffect コンストラクタなど、まだ最終決定されていない機能も含まれています。2 つのポリフィルの比較については、ホームページをご覧ください。
コードでいずれかのポリフィルを使用するには、いくつかの方法があります。
cdnjs や jsDelivr などの CDN を使用するか、rawgit.com を介して特定のリリースをターゲットにする
NPM または Bower を使用してインストールする
$ npm install web-animations-js $ bower install web-animations-js ```
いずれの場合も、他のコードの前にスクリプトタグでポリフィルを含めるだけで済みます。
<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 プロパティと組み合わせて使用する方法など、Web Animations に関する一連の優れた投稿を書いています。motion-path を使用したサンプルについては、Eric Willigers のドキュメントをご覧ください。