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 ? WebView Android 完全対応 43Chrome Android 完全対応 43Firefox Android 完全対応 51Opera Android 完全対応 30Safari iOS ? Samsung Internet Android 完全対応 4.0

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明

関連情報