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

ウェブアニメーション API で、ウェブページの表示を変更する同期やタイミングを取ること、つまり DOM 要素のアニメーションが実現できます。これは、タイミングモデルとアニメーションモデルの二つのモデルの組み合わせで実現します。

概念と利用方法

ウェブアニメーション 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 オブジェクトのインスタンスを返します。

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

以下のインターフェイスは、他の複数の場所で使われる機能を定義していたり、同じプロパティの値を持つ複数のインターフェイスの基盤を提供していたりするために、仕様書に含まれているものです。ウェブ開発作業でこれらを直接使うことはないでしょうが、ライブラリの開発者にとっては技術がどのように働き、実装が効率的になるかについて関心の対象になるかもしれませんし、ブラウザーの開発者は仕様書の定義よりも簡単なリファレンスを探しているかもしれません。/p>

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

仕様書

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

ブラウザーの対応

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

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 メンバーは対応状況をご覧ください。

関連情報

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

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