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

ウェブアニメーション API における Animation インターフェースは単一のアニメーションプレーヤーを表し、アニメーションノードやソースに対する再生制御やタイムラインを提供します。

コンストラクタ

Animation()
新たに Animation オブジェクトのインスタンスを生成します。

プロパティ

Animation.currentTime
再生中か停止中かに関わらずアニメーションの現在時間をミリ秒で表します。もしアニメーションに timeline が無い、またはアニメーションが有効では無かったりまだ再生させていない場合、この値は null となります。
Animation.effect
対象のアニメーションに紐付いた AnimationEffectReadOnly の取得および設定を行います。このプロパティ値は通常 KeyframeEffect オブジェクトになります。
Animation.finished 読取専用
対象アニメーションの終了時に Promise を返します。
Animation.id
アニメーションを識別するための String の取得および設定を行います。
Animation.pending 読取専用
アニメーションが再生の初期化や再生停止といった非同期処理のため現在待ち状態にあるかどうかを示します。
Animation.playState 読取専用
アニメーションの再生状況を示す列挙型の値を返します。
Animation.playbackRate
アニメーションの再生速度の取得および設定をします。
Animation.ready 読取専用
対象アニメーションの再生準備ができた時点で Promise を返します。
Animation.startTime
アニメーションが再生される所定時間の取得および設定を行います。
Animation.timeline
対象のアニメーションに紐づいた timeline の取得および設定を行います。

イベントハンドラ

Animation.oncancel
cancel イベントのイベントハンドラーの取得および設定を行います。
Animation.onfinish
finish イベントのイベントハンドラーの取得および設定を行います。

メソッド

Animation.cancel()
対象アニメーションによる全ての keyframeEffects を消去し、再生を中断します。
Animation.finish()
アニメーションが通常再生中の場合は終了を、逆再生中の場合は開始時点を設定します。
Animation.pause()
再生中のアニメーションを一時停止します。
Animation.play()
アニメーションを再生もしくは再開します。既に終了しているアニメーションについては再度再生を行います。
Animation.reverse()
アニメーションを逆再生し、開始時点で終了します。アニメーションが終了しているまたは未再生の場合は終わりから最初まで再生します。
Animation.updatePlaybackRate()
対象アニメーション再生位置を同期後、アニメーションの再生速度を設定します。

仕様

仕様 状態 コメント
Web Animations
Animation の定義
草案 初期定義

ブラウザ実装状況

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応

44

39 — 441

?48 なし26 なし
Animation() constructor61 ?

48

46 — 482

なし ? なし
cancel39 ?

48

40 — 483

なし26 なし
currentTime39 ?

48

40 — 483

なし26 なし
effect なし ?484 5 なし なし なし
finish39 ?

48

40 — 483

なし26 なし
finished なし ?406 なし なし なし
id50 ?

48

46 — 482

なし37 なし
oncancel50 ?

48

42 — 487

なし37 なし
onfinish39 ?

48

42 — 487

なし26 なし
pause39 ?

48

36 — 488

なし26 なし
pending なし ?599 なし なし なし
play39 ?

48

36 — 488

なし26 なし
playbackRate39 ?

48

42 — 487

なし26 なし
playState3910 ?

4811

36 — 488

なし2610 なし
ready なし ?3712 なし なし なし
reverse39 ?

48

42 — 487

なし26 なし
startTime39 ?

48

39 — 4813

なし26 なし
timeline なし ?4814 5 なし なし なし
updatePlaybackRate なし なし60 なし なし なし
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応

44

39 — 441

44

39 — 441

?4826 なし4.0
Animation() constructor6161 ?

48

46 — 482

? なし なし
cancel3939 ?

48

40 — 483

26 なし4.0
currentTime3939 ?

48

40 — 483

26 なし4.0
effect なし なし ?484 5 なし なし なし
finish3939 ?

48

40 — 483

26 なし4.0
finished なし なし ?406 なし なし なし
id5050 ?

48

46 — 482

37 なし5.0
oncancel5050 ?

48

42 — 487

37 なし5.0
onfinish3939 ?

48

42 — 487

26 なし4.0
pause3939 ?

48

36 — 488

26 なし4.0
pending なし なし ?599 なし なし なし
play3939 ?

48

36 — 488

26 なし4.0
playbackRate3939 ?

48

42 — 487

26 なし4.0
playState39103910 ?

4811

36 — 488

2610 なし4.0
ready なし なし ?3712 なし なし なし
reverse3939 ?

48

42 — 487

26 なし4.0
startTime3939 ?

48

39 — 4813

26 なし4.0
timeline なし なし ?4814 5 なし なし なし
updatePlaybackRate なし なし なし60 なし なし なし

1. Supported as AnimationPlayer.

2. From version 46 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

3. From version 40 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

4. This property is supported in Firefox 48 but is read-only. It became writable in Firefox 51.

5. From version 48: this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

6. From version 40: this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

7. From version 42 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

8. From version 36 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

9. Prior to version 59, the pending status was reported by a "pending" value returned from Animation.playState.

10. Before Chrome 50/Opera 37, this property returned idle for an animation that had not yet started. Starting with Chrome 50/Opera 37, it shows paused.

11. Prior to Firefox 59, this property returned pending for Animations with incomplete asynchronous operations but as of Firefox 59 this is indicated by the separate Animation.pending property. This reflects recent changes to the specification.

12. From version 37: this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

13. From version 39 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

14. This property is supported in Firefox 48 but is read-only. It became writable in Firefox 49.

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

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