Document: animationend イベント

animationend イベントは、 CSS アニメーションが完了したときに発生します。アニメーションが完了前に中止された場合、例えば要素が DOM から削除されたりアニメーションが要素から削除されたりした場合、 animationend イベントは発生しません。

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

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

この例は animationend イベントを待ち受けます。

document.addEventListener('animationend', () => {
  console.log('アニメーション終了');
});

同様に、 onanimationend イベントハンドラープロパティを使用するとこうなります。

document.onanimationend = () => {
  console.log('アニメーション終了');
};

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

仕様書

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

ブラウザーの互換性

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

凡例

完全対応  
完全対応

関連情報