これは実験的な機能です。本番で使用する前にブラウザー実装状況をチェックしてください。

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

概念と利用方法

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

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

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

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

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

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

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

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

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

ウェブアニメーション読み取り専用インターフェイス

以下のインターフェイスは、他の複数箇所で使われる機能や、同じプロパティの値として使用可能な複数インターフェイスの基盤となる機能を定義するために仕様書に含まれています。ウェブ開発でこれらを直接使うことはないでしょうが、ライブラリ開発者がより効率的な実装をするために当該技術がどのように機能するか理解するためであったり、ブラウザーの開発者が仕様書の定義よりも分かりやすいリファレンスを探す上で関心の対象となるかもしれません。

AnimationEffectTimingReadOnly
タイミングプロパティの連想配列オブジェクトであり、 KeyframeEffect に関連付けられた変更可能な AnimationEffectTiming インターフェイスが継承しています。
AnimationEffectReadOnly
再生のために Animation オブジェクトに渡される KeyframeEffect や、 KeyframeEffect (CSS アニメーション及びトランジションに継承) で使われる KeyframeEffectReadOnly のような、現在および将来の「アニメーション効果」を定義します。 Animation.effect のすべての値は AnimationEffectReadOnly に基づきます。
KeyframeEffectReadOnly
Animation() コンストラクターによって再生されるアニメーション可能なプロパティと値の組み合わせを記述しています  (KeyframeEffect が継承) 。

仕様書

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

ブラウザーの対応

現在、互換性データを可読形式の JSON フォーマットに置き換えているところです。 この互換性一覧は古い形式を使っており、これに含まれるデータの置き換えが済んでいません。 手助けしていただける場合は、こちらから!

Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
36.0[1] 48 (48)[1] 未サポート

29
28 behind pref

未サポート
(有) 未サポート[1] 未サポート 未サポート 未サポート
Feature Android Android Webview Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile Chrome for Android
Basic support 未サポート 42.0 48.0 (48) 未サポート 未サポート 未サポート 42.0

[1] API のサブセットのみが有効です。個別の API メンバーは対応状況をご覧ください。

関連情報

ドキュメントのタグと貢献者

このページの貢献者: kay8, mfuji09
最終更新者: kay8,