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のインターフェイスで、アニメーションプレイヤーを表し、アニメーションノードやソースに対する再生制御やタイムラインを提供します。

コンストラクター

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