Document: animationstart イベント

animationstart イベントは、 CSS アニメーションが開始したときに発生します。 animation-delay がある場合、このイベントは待ち時間が経過したときに一度発生します。待ち時間が負の数の場合、イベントは elapsedTime が待ち時間の絶対値と等しくなったときに発生します (および、関連して、アニメーションはシーケンスの中でそのタイムインデックスに再生が始まります)。

バブリング あり
キャンセル 不可
インターフェイス AnimationEvent
イベントハンドラープロパティ onanimationstart (en-US)

このイベントの本来の対象は、トランジションが適用された Element です。このイベントを Document インターフェイス上で待ち受けし、キャプチャやバブリングの局面で処理することができます。このイベントについて完全な詳細は、 HTMLElement: animationstart イベントを参照してください。

例

このコードは animationstart イベントを待ち受けし、イベント発生時にメッセージを記録します。

js

document.addEventListener('animationstart', () => {
  console.log('Animation started');
});

同様に、 onanimationstart を使用するとこうなります。

js

document.onanimationstart = () => {
  console.log('Animation started');
};

このイベントのライブデモを参照してください。

仕様書

Specification
CSS Animations Level 1
# eventdef-globaleventhandlers-animationstart

ブラウザーの互換性

BCD tables only load in the browser

関連情報