Document: animationstart イベント

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

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

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

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

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

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

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

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

仕様書

仕様書 状態 備考
CSS Animations 草案 初回定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
animationstart eventChrome 完全対応 43Edge 完全対応 12Firefox 完全対応 51IE 完全対応 10Opera 完全対応 30Safari 完全対応 9WebView Android 完全対応 43Chrome Android 完全対応 43Firefox Android 完全対応 51Opera Android 完全対応 30Safari iOS 完全対応 9Samsung Internet Android 完全対応 4.0

凡例

完全対応  
完全対応

関連情報