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