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

ウェブアニメーション 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 の定義
草案 初期定義

ブラウザ実装状況

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
基本対応
実験的
Chrome 完全対応 44
完全対応 44
未対応 39 — 44
代替名
代替名 非標準の名前 AnimationPlayer を使用しています。
Edge ? Firefox 完全対応 48IE 未対応 なしOpera 完全対応 26Safari 未対応 なしWebView Android 完全対応 44
完全対応 44
未対応 39 — 44
代替名
代替名 非標準の名前 AnimationPlayer を使用しています。
Chrome Android 完全対応 44
完全対応 44
未対応 39 — 44
代替名
代替名 非標準の名前 AnimationPlayer を使用しています。
Edge Mobile ? Firefox Android 完全対応 48Opera Android 完全対応 26Safari iOS 未対応 なしSamsung Internet Android 完全対応 4.0
Animation() constructor
実験的
Chrome 完全対応 61Edge ? Firefox 完全対応 48
完全対応 48
未対応 46 — 48
無効
無効 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.
IE 未対応 なしOpera ? Safari 未対応 なしWebView Android 完全対応 61Chrome Android 完全対応 61Edge Mobile ? Firefox Android 完全対応 48
完全対応 48
未対応 46 — 48
無効
無効 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.
Opera Android ? Safari iOS 未対応 なしSamsung Internet Android 未対応 なし
cancel
実験的
Chrome 完全対応 39Edge ? Firefox 完全対応 48
完全対応 48
未対応 40 — 48
無効
無効 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.
IE 未対応 なしOpera 完全対応 26Safari 未対応 なしWebView Android 完全対応 39Chrome Android 完全対応 39Edge Mobile ? Firefox Android 完全対応 48
完全対応 48
未対応 40 — 48
無効
無効 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.
Opera Android 完全対応 26Safari iOS 未対応 なしSamsung Internet Android 完全対応 4.0
currentTime
実験的
Chrome 完全対応 39Edge ? Firefox 完全対応 48
完全対応 48
未対応 40 — 48
無効
無効 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.
IE 未対応 なしOpera 完全対応 26Safari 未対応 なしWebView Android 完全対応 39Chrome Android 完全対応 39Edge Mobile ? Firefox Android 完全対応 48
完全対応 48
未対応 40 — 48
無効
無効 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.
Opera Android 完全対応 26Safari iOS 未対応 なしSamsung Internet Android 完全対応 4.0
effect
実験的
Chrome 未対応 なしEdge ? Firefox 完全対応 63
完全対応 63
完全対応 48
補足 無効
補足 This property is supported in Firefox 48 but is read-only. It became writable in Firefox 51.
無効 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.
IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしEdge Mobile ? Firefox Android 完全対応 63
完全対応 63
完全対応 48
補足 無効
補足 This property is supported in Firefox 48 but is read-only. It became writable in Firefox 51.
無効 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.
Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
finish
実験的
Chrome 完全対応 39Edge ? Firefox 完全対応 48
完全対応 48
未対応 40 — 48
無効
無効 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.
IE 未対応 なしOpera 完全対応 26Safari 未対応 なしWebView Android 完全対応 39Chrome Android 完全対応 39Edge Mobile ? Firefox Android 完全対応 48
完全対応 48
未対応 40 — 48
無効
無効 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.
Opera Android 完全対応 26Safari iOS 未対応 なしSamsung Internet Android 完全対応 4.0
finished
実験的
Chrome 未対応 なしEdge ? Firefox 完全対応 63
完全対応 63
完全対応 40
無効
無効 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.
IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしEdge Mobile ? Firefox Android 完全対応 63
完全対応 63
完全対応 40
無効
無効 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.
Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
id
実験的
Chrome 完全対応 50Edge ? Firefox 完全対応 48
完全対応 48
未対応 46 — 48
無効
無効 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.
IE 未対応 なしOpera 完全対応 37Safari 未対応 なしWebView Android 完全対応 50Chrome Android 完全対応 50Edge Mobile ? Firefox Android 完全対応 48
完全対応 48
未対応 46 — 48
無効
無効 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.
Opera Android 完全対応 37Safari iOS 未対応 なしSamsung Internet Android 完全対応 5.0
oncancel
実験的
Chrome 完全対応 50Edge ? Firefox 完全対応 48
完全対応 48
未対応 42 — 48
無効
無効 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.
IE 未対応 なしOpera 完全対応 37Safari 未対応 なしWebView Android 完全対応 50Chrome Android 完全対応 50Edge Mobile ? Firefox Android 完全対応 48
完全対応 48
未対応 42 — 48
無効
無効 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.
Opera Android 完全対応 37Safari iOS 未対応 なしSamsung Internet Android 完全対応 5.0
onfinish
実験的
Chrome 完全対応 39Edge ? Firefox 完全対応 48
完全対応 48
未対応 42 — 48
無効
無効 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.
IE 未対応 なしOpera 完全対応 26Safari 未対応 なしWebView Android 完全対応 39Chrome Android 完全対応 39Edge Mobile ? Firefox Android 完全対応 48
完全対応 48
未対応 42 — 48
無効
無効 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.
Opera Android 完全対応 26Safari iOS 未対応 なしSamsung Internet Android 完全対応 4.0
pause
実験的
Chrome 完全対応 39Edge ? Firefox 完全対応 48
完全対応 48
未対応 36 — 48
無効
無効 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.
IE 未対応 なしOpera 完全対応 26Safari 未対応 なしWebView Android 完全対応 39Chrome Android 完全対応 39Edge Mobile ? Firefox Android 完全対応 48
完全対応 48
未対応 36 — 48
無効
無効 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.
Opera Android 完全対応 26Safari iOS 未対応 なしSamsung Internet Android 完全対応 4.0
pending
実験的
Chrome 未対応 なしEdge ? Firefox 完全対応 59
補足
完全対応 59
補足
補足 Prior to version 59, the pending status was reported by a "pending" value returned from Animation.playState.
IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしEdge Mobile ? Firefox Android 完全対応 59
補足
完全対応 59
補足
補足 Prior to version 59, the pending status was reported by a "pending" value returned from Animation.playState.
Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
play
実験的
Chrome 完全対応 39Edge ? Firefox 完全対応 48
完全対応 48
未対応 36 — 48
無効
無効 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.
IE 未対応 なしOpera 完全対応 26Safari 未対応 なしWebView Android 完全対応 39Chrome Android 完全対応 39Edge Mobile ? Firefox Android 完全対応 48
完全対応 48
未対応 36 — 48
無効
無効 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.
Opera Android 完全対応 26Safari iOS 未対応 なしSamsung Internet Android 完全対応 4.0
playbackRate
実験的
Chrome 完全対応 39Edge ? Firefox 完全対応 48
完全対応 48
未対応 42 — 48
無効
無効 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.
IE 未対応 なしOpera 完全対応 26Safari 未対応 なしWebView Android 完全対応 39Chrome Android 完全対応 39Edge Mobile ? Firefox Android 完全対応 48
完全対応 48
未対応 42 — 48
無効
無効 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.
Opera Android 完全対応 26Safari iOS 未対応 なしSamsung Internet Android 完全対応 4.0
playState
実験的
Chrome 完全対応 39
補足
完全対応 39
補足
補足 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.
Edge ? Firefox 完全対応 48
補足
完全対応 48
補足
補足 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.
未対応 36 — 48
無効
無効 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.
IE 未対応 なしOpera 完全対応 26
補足
完全対応 26
補足
補足 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.
Safari 未対応 なしWebView Android 完全対応 39
補足
完全対応 39
補足
補足 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.
Chrome Android 完全対応 39
補足
完全対応 39
補足
補足 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.
Edge Mobile ? Firefox Android 完全対応 48
補足
完全対応 48
補足
補足 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.
未対応 36 — 48
無効
無効 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.
Opera Android 完全対応 26
補足
完全対応 26
補足
補足 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.
Safari iOS 未対応 なしSamsung Internet Android 完全対応 4.0
ready
実験的
Chrome 未対応 なしEdge ? Firefox 完全対応 63
完全対応 63
完全対応 37
無効
無効 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.
IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしEdge Mobile ? Firefox Android 完全対応 63
完全対応 63
完全対応 37
無効
無効 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.
Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
reverse
実験的
Chrome 完全対応 39Edge ? Firefox 完全対応 48
完全対応 48
未対応 42 — 48
無効
無効 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.
IE 未対応 なしOpera 完全対応 26Safari 未対応 なしWebView Android 完全対応 39Chrome Android 完全対応 39Edge Mobile ? Firefox Android 完全対応 48
完全対応 48
未対応 42 — 48
無効
無効 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.
Opera Android 完全対応 26Safari iOS 未対応 なしSamsung Internet Android 完全対応 4.0
startTime
実験的
Chrome 完全対応 39Edge ? Firefox 完全対応 48
完全対応 48
未対応 39 — 48
無効
無効 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.
IE 未対応 なしOpera 完全対応 26Safari 未対応 なしWebView Android 完全対応 39Chrome Android 完全対応 39Edge Mobile ? Firefox Android 完全対応 48
完全対応 48
未対応 39 — 48
無効
無効 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.
Opera Android 完全対応 26Safari iOS 未対応 なしSamsung Internet Android 完全対応 4.0
timeline
実験的
Chrome 未対応 なしEdge ? Firefox 完全対応 63
無効
完全対応 63
無効
無効 From version 63: this feature is behind the dom.animations-api.timelines.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
未対応 48 — 63
補足 無効
補足 This property is supported in Firefox 48 but is read-only. It became writable in Firefox 49.
無効 From version 48 until version 63 (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.
IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしEdge Mobile ? Firefox Android 完全対応 63
無効
完全対応 63
無効
無効 From version 63: this feature is behind the dom.animations-api.timelines.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
未対応 48 — 63
補足 無効
補足 This property is supported in Firefox 48 but is read-only. It became writable in Firefox 49.
無効 From version 48 until version 63 (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.
Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
updatePlaybackRate
実験的
Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 60IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしEdge Mobile 未対応 なしFirefox Android 完全対応 60Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。
非標準の名前を使用しています。
非標準の名前を使用しています。

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

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