Element: animationend Ereignis

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 animationend Ereignis wird ausgelöst, wenn eine CSS-Animation abgeschlossen ist. Wenn die Animation abgebrochen wird, bevor sie abgeschlossen ist, zum Beispiel wenn das Element aus dem DOM entfernt wird oder die Animation vom Element entfernt wird, wird das animationend Ereignis nicht ausgelöst.

Syntax

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

addEventListener("animationend", (event) => { })

onanimationend = (event) => { }

Ereignistyp

Ein AnimationEvent. Erbt von Event.

Ereigniseigenschaften

Erbt auch Eigenschaften von seinem Eltern-Event Event.

AnimationEvent.animationName Schreibgeschützt: Ein String, der den Wert des animation-name, das die Animation erzeugt hat, enthält.
AnimationEvent.elapsedTime Schreibgeschützt: Ein float, das die Zeitangabe in Sekunden angibt, wie lange die Animation schon lief, als dieses Ereignis ausgelöst wurde, ohne die Zeit, in der die Animation pausiert war. Für ein 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 ausgelöst, die (-1 * delay) enthält.
AnimationEvent.pseudoElement Schreibgeschützt: Ein String, beginnend mit '::', der den Namen des Pseudo-Elements enthält, auf dem die Animation läuft. Wenn die Animation nicht auf einem Pseudo-Element, sondern auf dem Element abläuft, ein leerer String: ''.

Beispiele

Dieses Beispiel erhält ein Element, das animiert wird, und hört auf das animationend Ereignis:

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

animated.addEventListener("animationend", () => {
  console.log("Animation ended");
});

Dasselbe, aber mit der onanimationend Ereignis-Handler-Eigenschaft:

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

animated.onanimationend = () => {
  console.log("Animation ended");
};

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-animationend

Browser-Kompatibilität

Siehe auch

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

Help improve MDN

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

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