Animation

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2020.

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

EventTarget Animation

コンストラクター

Animation()

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

インスタンスプロパティ

Animation.currentTime

このアニメーションの現在時刻の値で、ミリ秒単位です。再生中か停止中かは問いません。アニメーションに timeline がなかったり、無効であったり、まだ再生されていなかったりした場合は、この値は null になります。

Animation.effect

このアニメーションに関連付けられた AnimationEffect を取得または設定します。これはふつう、 KeyframeEffect オブジェクトになります。

Animation.finished 読取専用

このアニメーションにおいて現在完了しているプロミスを返します。

Animation.id

このアニメーションを識別するための String を取得または設定します。

Animation.pending 読取専用

このアニメーションが現在、再生待ちや再生中の一時停止などの非同期操作を待機しているかどうかを示します。

Animation.playState 読取専用

列挙型の値で、アニメーションの再生状態を示す列挙値を返します。

Animation.playbackRate

このアニメーションの再生速度を取得または設定します。

Animation.ready 読取専用

このアニメーションの準備ができているかどうかを示すプロミスを返します。

Animation.replaceState 読取専用

アニメーションがアクティブか、他のアニメーションに置き換えられて自動的に除去されたか、 Animation.persist() の呼び出しによって明示的に維持されているかを示します。

Animation.startTime

アニメーションの再生が始まる予定の時刻を取得または設定します。

Animation.timeline

このアニメーションに関連付けられる timeline を取得または設定します。

インスタンスメソッド

Animation.cancel()

このアニメーションで発生したすべての keyframeEffects を消去し、再生を中止します。

Animation.commitStyles()

アニメーションの現在のスタイル状態を、そのアニメーションが削除された後でも、アニメーションしている要素にコミットします。これは、アニメーションの現在のスタイル状態を style 属性内のプロパティの形で動作している要素に書き込むことで行われます。

Animation.finish()

再生位置をアニメーションのどちらかの端まで移動します。アニメーションが通常再生中か逆再生中かによって変わります。

Animation.pause()

アニメーションの再生を一時停止します。

Animation.persist()

アニメーションを明示的に維持し、別のアニメーションに置き換わったときにアニメーションの自動削除が行われることを防ぎます。

Animation.play()

アニメーションの再生を開始または再開します。また、前回終了したアニメーションを再度開始します。

Animation.reverse()

再生方向を反転させ、アニメーションの開始位置で停止させます。アニメーションが終了しているか未再生の場合は、末尾から先頭に向けて再生されます。

Animation.updatePlaybackRate()

アニメーションの再生位置を同期させた後の速度を設定します。

イベント

cancel

Animation.cancel() メソッドが呼び出されるか、アニメーションの再生状態が他の状態から "idle" へ遷移した場合に発行されます。

finish

アニメーションの再生が終了した時に発行されます。

remove

アニメーションが取り除かれた時 (すなわち、 active 置換状態に遷移した時)に発行されます。

アクセシビリティの考慮

注意欠陥多動性障碍(ADHD)などの認知能力に不安のある方にとって、まばたきや点滅するアニメーションは問題となることがあります。さらに、ある種の動作は、前庭障害、てんかん、片頭痛、スコトピック過敏症の引き金になることがあります。

アニメーションを一時停止したり、無効にしたりするメカニズムを提供したり、動作縮減メディアクエリー(または同等のユーザーエージェントクライアントヒント Sec-CH-Prefers-Reduced-Motion))を使って、アニメーションなしの操作を希望するユーザーのために補完的な操作を提供することを検討してください。

仕様書

Specification
Web Animations
# the-animation-interface

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Animation
Animation() constructor
cancel
cancel event
commitStyles
currentTime
effect
finish
finish event
finished
id
overallProgress
Experimental
pause
pending
persist
play
playState
playbackRate
ready
remove event
Browsers automatically remove indefinite filling animations
replaceState
reverse
startTime
timeline
updatePlaybackRate

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.

関連情報