ウェブアニメーション API

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

概念と利用方法

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

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

Animation
アニメーションノードやソースの再生制御やタイムラインを提供します。 KeyframeEffect() コンストラクターで作成されたオブジェクトを取ることができます。
KeyframeEffect (en-US)
キーフレームと呼ばれるアニメーション可能なプロパティと値の組み合わせ、及びそのタイミングオプション (en-US)を記述します。これは Animation() コンストラクターを使用して再生することができます。
AnimationTimeline (en-US)
アニメーションのタイムラインを表します。このインターフェイスはタイムライン機能 (DocumentTimeline (en-US) などのタイムラインオブジェクト) を定義するために存在し、これ自体は開発者からはアクセスされません。
AnimationEvent
実際には CSS アニメーションの一部です。
DocumentTimeline (en-US)
アニメーションのタイムラインを表し、既定の文書のタイムライン (Document.timeline (en-US) プロパティ) を含みます。
EffectTiming
Element.animate(), KeyframeEffectReadOnly.KeyframeEffectReadOnly() (en-US), KeyframeEffect.KeyframeEffect() のすべてがタイミングプロパティの任意の連想配列オブジェクトを受け付けます。

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

Web Animation API によって document 及び element に新たに追加された機能もあります。

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

document.timeline (en-US)
既定の文書タイムラインを表す DocumentTimeline オブジェクトです。
document.getAnimations()
document 内で要素に対して現在有効な Animation オブジェクトの配列を返します。

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

Element.animate()
要素のアニメーションを作成して再生するショートカットメソッドです。作成された Animation オブジェクトのインスタンスを返します。
Element.getAnimations() (en-US)
Animation オブジェクトの配列で、現在その要素に関連し、将来の実行が予定されているものを返します。

仕様書

仕様書 策定状況 コメント
Web Animations 草案 初回定義

関連情報