Window: animationiteration event

animationiteration イベントは、 CSS アニメーションの反復が1回分終了し、次の回が始まったときに発生します。このイベントは animationend イベントと同時には発生せず、従って animation-iteration-count が1のアニメーションでは発生しません。

このイベントの本来の対象は、トランジションが適用された 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 アニメーション
• CSS アニメーションの使用
• AnimationEvent
• 関連イベント: animationstart, animationend, animationcancel
• Document を対象としたこのイベント: animationiteration
• HTMLElement を対象としたこのイベント: animationiteration