Element: animationiteration-Event

Baseline Widely available

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

Das animationiteration-Event 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 Ereignisbehandlungs-Eigenschaft.

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

Ereignistyp

Ein AnimationEvent. Erbt von Event.

Ereigniseigenschaften

Erbt auch Eigenschaften von seinem Elternteil Event .

AnimationEvent.animationName Schreibgeschützt: Ein String, der den Wert des animation-name enthält, das die Animation erzeugt hat.
AnimationEvent.elapsedTime Schreibgeschützt: Ein float, der die Zeit angibt, die die Animation beim Auslösen dieses Ereignisses bereits gelaufen ist, in Sekunden, ohne die Zeit zu berücksichtigen, in der die Animation pausiert war. Bei einem animationstart-Event ist elapsedTime 0.0, es sei denn, es gab einen negativen Wert für animation-delay, in welchem Fall das Ereignis mit elapsedTime und dem Wert (-1 * delay) ausgelöst wird.
AnimationEvent.pseudoElement Schreibgeschützt: Ein String, beginnend mit '::', der den Namen des Pseudoelements enthält, auf dem die Animation läuft. Wenn die Animation nicht auf einem Pseudoelement, sondern auf dem Element läuft, ist der String leer: ''.

Beispiele

Dieser Code verwendet animationiteration, um die Anzahl der Iterationen, die eine Animation abgeschlossen hat, zu verfolgen:

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

Dasselbe, jedoch mit der onanimationiteration-Ereignisbehandlungs-Eigenschaft:

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

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

CSS-Animationen
Verwendung von CSS-Animationen
AnimationEvent
Verwandte Ereignisse: animationstart, animationend, animationcancel

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden