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