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

ブラウザーの互換性

BCD tables only load in the browser

関連情報