Element: animationiteration Ereignis

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.

Das animationiteration Ereignis wird ausgelöst, wenn eine Iteration einer CSS-Animation endet und eine neue beginnt. Dieses Ereignis tritt nicht gleichzeitig mit dem animationend Ereignis auf und tritt daher nicht bei Animationen mit einem animation-iteration-count von eins auf.

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignis-Handler-Eigenschaft.

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

onanimationiteration = (event) => { }

Ereignistyp

Ein AnimationEvent. Erbt von Event.

Event AnimationEvent

Eigenschaften des Ereignisses

Erbt auch Eigenschaften von seinem Eltern-Event.

AnimationEvent.animationName Schreibgeschützt

Ein String, der den Wert des animation-name enthält, der die Animation erstellt hat.

AnimationEvent.elapsedTime Schreibgeschützt

Ein float, der die Zeitdauer in Sekunden angibt, wie lange die Animation beim Auslösen dieses Ereignisses bereits läuft, ohne die Zeit zu berücksichtigen, die die Animation pausiert war. Bei einem animationstart Ereignis ist elapsedTime 0.0, es sei denn, es gab einen negativen Wert für animation-delay, in diesem Fall wird das Ereignis mit elapsedTime, das (-1 * delay) enthält, ausgelöst.

AnimationEvent.pseudoElement Schreibgeschützt

Ein String, der mit '::' beginnt und den Namen des Pseudo-Elements enthält, auf dem die Animation läuft. Falls die Animation nicht auf einem Pseudo-Element, sondern auf dem Element selbst läuft, ein leerer String: ''.

Beispiele

Dieser Code verwendet animationiteration, um die Anzahl der abgeschlossenen Iterationen einer Animation nachzuverfolgen:

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

let iterationCount = 0;

animated.addEventListener("animationiteration", () => {
  iterationCount++;
  console.log(`Animation iteration count: ${iterationCount}`);
});

Dasselbe, aber unter Verwendung der onanimationiteration Ereignis-Handler-Eigenschaft:

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

let iterationCount = 0;

animated.onanimationiteration = () => {
  iterationCount++;
  console.log(`Animation iteration count: ${iterationCount}`);
};

Live-Beispiel

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">Activate animation</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";
});

Ergebnis

Spezifikationen

Specification
CSS Animations Level 1
# eventdef-globaleventhandlers-animationiteration

Browser-Kompatibilität

Siehe auch