ウェブアニメーション API (Web Animation API) を使うことで 、ウェブページの表現を変化させるの同期やタイミング、つまり DOM 要素のアニメーションが可能です。これらはタイミングモデルおよびアニメーションモデルという 2 つのモデルの組み合わせによって実現されます。

概念と利用方法

ウェブアニメーション API は、 DOM 要素のアニメーションを記述する共通言語をブラウザーと開発者に提供します。 API の背景の概念や利用方法についての詳しい情報は、ウェブアニメーション API の使用をご覧ください。

ウェブアニメーションのインターフェイス

Animation

アニメーションノードやソースの再生制御やタイムラインを提供します。KeyframeEffect() コンストラクターで作成されたオブジェクトを取ることができます。

KeyframeEffect

キーフレームと呼ばれるアニメーション可能なプロパティと値の組み合わせ、およびそのタイミングオプションを記述します。これはAnimation() コンストラクターを使用して再生することができます。

AnimationTimeline

アニメーションのタイムラインを表します。このインターフェイスはタイムライン機能（DocumentTimeline や将来のタイムラインオブジェクトによって継承）を定義するために存在し、これ自体は開発者からはアクセスされません。

AnimationEvent

実際には CSS アニメーションの一部です。

DocumentTimeline

アニメーションのタイムラインを表し、既定の文書のタイムライン（Document.timeline プロパティを使用してアクセス）を含みます。

他のインターフェイスへの拡張

ウェブアニメーション API によってdocument およびelement に新たに追加された機能があります。

Document インターフェイスの拡張

document.timeline

既定の文書タイムラインを表すDocumentTimeline オブジェクトです。

document.getAnimations()

document 内で要素に対して現在有効なAnimation オブジェクトの配列を返します。

Element インターフェイスの拡張

Element.animate()

要素のアニメーションを作成して再生するショートカットメソッドです。作成されたAnimation オブジェクトのインスタンスを返します。

Element.getAnimations()

Animation オブジェクトの配列で、現在その要素に関連し、将来の実行が予定されているものを返します。

仕様書

関連情報

• ウェブアニメーション API の使用
• ウェブアニメーションのデモ
• ポリフィル
• Firefox の現在の実装:AreWeAnimatedYet
• ブラウザーの対応のテスト