Element: animationiteration イベント

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since December 2019.

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

構文

このイベント名を addEventListener() 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

addEventListener("animationiteration", (event) => {}); onanimationiteration = (event) => {};

イベント型

AnimationEvent です。 Event を継承しています。

イベントプロパティ

親である Event から継承したプロパティもあります。

AnimationEvent.animationName 読取専用: アニメーションを生成した animation-name の値を含む文字列です。
AnimationEvent.elapsedTime 読取専用: float で、このイベントが発行されたときにアニメーションが実行されていた時間（アニメーションが一時停止していた時間を除く）を秒単位で指定します。 animationstart イベントの場合、 elapsedTime は 0.0 です。ただし、animation-delay に負の値を指定した場合は、 (-1 * delay) を含む elapsedTime としてイベントが発行されます。
AnimationEvent.pseudoElement 読取専用: '::' で始まる文字列で、アニメーションを実行する擬似要素の名前を指定します。です。アニメーションが擬似要素上で動作しておらず、要素上で動作している場合は、空文字列 '' となります。

例

このコードは animationiteration を使用して、アニメーションの反復が終了した回数を追跡します。

const animated = document.querySelector(".animated"); let iterationCount = 0; animated.addEventListener("animationiteration", () => { iterationCount++; console.log(`アニメーション反復回数: ${iterationCount}`); });

同様に、 onanimationiteration イベントハンドラープロパティを使用するとこうなります。

const animated = document.querySelector(".animated"); let iterationCount = 0; animated.onanimationiteration = () => { iterationCount++; console.log(`アニメーション反復回数: ${iterationCount}`); };

ライブ例

HTML

html

<div class="animation-example"> <div class="container"> <p class="animation">You chose a cold night to visit our planet.</p> </div> <button class="activate" type="button">アニメーションを有効化</button> <div class="event-log"></div> </div>

CSS

css

.container { height: 3rem; } .event-log { width: 25rem; height: 2rem; border: 1px solid black; margin: 0.2rem; padding: 0.2rem; } .animation.active { animation-duration: 2s; animation-name: slide-in; animation-iteration-count: 2; } @keyframes slide-in { from { transform: translateX(100%) scaleX(3); } to { transform: translateX(0) scaleX(1); } }

JavaScript

const animation = document.querySelector("p.animation"); const animationEventLog = document.querySelector( ".animation-example>.event-log", ); const applyAnimation = document.querySelector( ".animation-example>button.activate", ); let iterationCount = 0; animation.addEventListener("animationstart", () => { animationEventLog.textContent = `${animationEventLog.textContent}'animation started' `; }); animation.addEventListener("animationiteration", () => { iterationCount++; animationEventLog.textContent = `${animationEventLog.textContent}'animation iterations: ${iterationCount}' `; }); animation.addEventListener("animationend", () => { animationEventLog.textContent = `${animationEventLog.textContent}'animation ended'`; animation.classList.remove("active"); applyAnimation.textContent = "Activate animation"; }); animation.addEventListener("animationcancel", () => { animationEventLog.textContent = `${animationEventLog.textContent}'animation canceled'`; }); applyAnimation.addEventListener("click", () => { animation.classList.toggle("active"); animationEventLog.textContent = ""; iterationCount = 0; const active = animation.classList.contains("active"); applyAnimation.textContent = active ? "Cancel animation" : "Activate animation"; });

結果

仕様書

Specification
CSS Animations Level 1 # eventdef-globaleventhandlers-animationiteration