Window: animationiteration event

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 草案 初回定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
animationiteration eventChrome 完全対応 43
完全対応 43
完全対応 1
接頭辞付き
接頭辞付き webkit のベンダー接頭辞が必要
Edge 完全対応 ≤79
完全対応 ≤79
完全対応 ≤79
接頭辞付き
接頭辞付き webkit のベンダー接頭辞が必要
Firefox 完全対応 51IE ? Opera ? Safari 完全対応 9WebView Android 完全対応 43
完全対応 43
完全対応 あり
接頭辞付き
接頭辞付き webkit のベンダー接頭辞が必要
Chrome Android 完全対応 43
完全対応 43
完全対応 18
接頭辞付き
接頭辞付き webkit のベンダー接頭辞が必要
Firefox Android 完全対応 51Opera Android ? Safari iOS 完全対応 9Samsung Internet Android 完全対応 4.0
完全対応 4.0
完全対応 1.0
接頭辞付き
接頭辞付き webkit のベンダー接頭辞が必要

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

関連情報