ウェブアニメーション API

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

概念と利用方法

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

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

Animation

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

KeyframeEffect (en-US)

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

AnimationTimeline (en-US)

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

AnimationEvent

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

DocumentTimeline (en-US)

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

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

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

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

document.timeline (en-US)

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

document.getAnimations()

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

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

Element.animate()

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

Element.getAnimations()

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

仕様書

Specification
Web Animations

関連情報