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 March 2020.

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

構文

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

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

onanimationiteration = (event) => {};

イベント型

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

Event AnimationEvent

イベントプロパティ

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

AnimationEvent.animationName 読取専用

アニメーションを生成した animation-name の値を含む文字列です。

AnimationEvent.elapsedTime 読取専用

float で、このイベントが発行されたときにアニメーションが実行されていた時間(アニメーションが一時停止していた時間を除く)を秒単位で指定します。 animationstart イベントの場合、 elapsedTime0.0 です。ただし、animation-delay に負の値を指定した場合は、 (-1 * delay) を含む elapsedTime としてイベントが発行されます。

AnimationEvent.pseudoElement 読取専用

'::' で始まる文字列で、アニメーションを実行する擬似要素の名前を指定します。です。アニメーションが擬似要素上で動作しておらず、要素上で動作している場合は、空文字列 '' となります。

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

js
const animated = document.querySelector(".animated");

let iterationCount = 0;

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

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

js
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

js
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

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
animationiteration event

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
Requires a vendor prefix or different name for use.
Has more compatibility info.

関連情報