Document: animationstart イベント

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

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

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

凡例

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

関連情報