Element: animationcancel-Ereignis

Baseline 2026

Neu verfügbar

Seit Februar 2026 funktioniert diese Funktion auf aktuellen Geräten und in aktuellen Browserversionen. Auf älteren Geräten oder in älteren Browsern funktioniert sie möglicherweise nicht.

Vollständige Kompatibilität anzeigen
Mehr erfahren

Das animationcancel-Ereignis wird ausgelöst, wenn eine CSS-Animation unerwartet abgebrochen wird. Das ist der Fall, wenn sie beendet wird, ohne ein animationend-Ereignis auszulösen. Dies kann geschehen, wenn animation-name so geändert wird, dass die Animation entfernt wird, oder wenn das animierte Element mithilfe von CSS ausgeblendet wird – entweder direkt oder weil eines seiner übergeordneten Elemente ausgeblendet wird.

Syntax

Verwenden Sie den Ereignisnamen in addEventListener():

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

Alternativ können Sie die Event-Handler-Property der Schnittstelle verwenden:

onanimationcancel = (event) => { }

Ereignistyp

Ein AnimationEvent. Erbt von Event.

Beispiele

Dieser Code ruft ein Element ab, das gerade animiert wird, und fügt einen Listener für das animationcancel-Ereignis hinzu. Anschließend setzt er die display-Property des Elements auf none, wodurch das animationcancel-Ereignis ausgelöst wird.

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

animated.addEventListener("animationcancel", () => {
  console.log("Animation canceled");
});

animated.style.display = "none";

Das Gleiche, jedoch mit der onanimationcancel-Property anstelle von addEventListener() (beachten Sie, dass dadurch gegebenenfalls andere über onanimationcancel hinzugefügte Event-Listener ersetzt werden):

const animated = document.querySelector(".animated");
animated.onanimationcancel = () => {
  console.log("Animation canceled");
};

animated.style.display = "none";

Interaktives 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

Spezifikation
CSS Animations Level 1 # eventdef-globaleventhandlers-animationcancel

Browser-Kompatibilität

Siehe auch

CSS-Animationen
CSS-Animationen verwenden
AnimationEvent
Verwandte Ereignisse: animationstart, animationend, animationiteration

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

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