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