Window: animationstart イベント

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

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

例

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

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

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

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

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

仕様書

ブラウザーの互換性

関連情報

• CSS アニメーション
• CSS アニメーションの使用
• AnimationEvent
• 関連イベント: animationend, animationiteration, animationcancel
• Document を対象としたこのイベント: animationstart
• HTMLElement を対象としたこのイベント: animationstart