animationend イベントは、 CSS アニメーションが完了したときに発生します。アニメーションが完了前に中止された場合、例えば要素が DOM から削除されたりアニメーションが要素から削除されたりした場合、 animationend イベントは発生しません。
| バブリング | あり |
|---|---|
| キャンセル | 不可 |
| インターフェイス | AnimationEvent |
| イベントハンドラープロパティ | onanimationend |
このイベントの本来の対象は、トランジションが適用された Element です。このイベントを Document インターフェイス上で待ち受けし、キャプチャやバブリングの局面で処理することができます。このイベントについて完全な詳細は、 HTMLElement: animationend イベントを参照してください。
例
この例は animationend イベントを待ち受けます。
document.addEventListener('animationend', () => {
console.log('アニメーション終了');
});
同様に、 onanimationend イベントハンドラープロパティを使用するとこうなります。
document.onanimationend = () => {
console.log('アニメーション終了');
};
仕様書
| 仕様書 | 状態 | 備考 |
|---|---|---|
| CSS Animations | 草案 | 初回定義 |
ブラウザーの互換性
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
Update compatibility data on GitHub
| デスクトップ | モバイル | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
animationend event | Chrome 完全対応 43 | Edge 完全対応 12 | Firefox 完全対応 あり | IE 完全対応 10 | Opera 完全対応 30 | Safari 完全対応 9 | WebView Android 完全対応 43 | Chrome Android 完全対応 43 | Firefox Android 完全対応 あり | Opera Android 完全対応 30 | Safari iOS 完全対応 9 | Samsung Internet Android 完全対応 4.0 |
凡例
- 完全対応
- 完全対応
関連情報
- CSS アニメーション
- CSS アニメーションの使用
AnimationEvent- 関連イベント:
animationstart,animationcancel,animationiteration Windowを対象としたこのイベント:animationendHTMLElementを対象としたこのイベント:animationend