Element: animationstart-Ereignis

Baseline

Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Dezember 2019 browserübergreifend verfügbar.

Vollständige Kompatibilität anzeigen
Mehr erfahren

Das animationstart-Ereignis wird ausgelöst, wenn eine CSS-Animation gestartet ist. Wenn ein animation-delay festgelegt ist, wird das Ereignis ausgelöst, sobald die Verzögerung abgelaufen ist. Bei einer negativen Verzögerung wird das Ereignis mit einer elapsedTime ausgelöst, die dem absoluten Wert der Verzögerung entspricht. Die Animation beginnt entsprechend an diesem Zeitpunkt innerhalb der Sequenz.

Syntax

Verwenden Sie den Ereignisnamen in addEventListener():

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

Alternativ können Sie ihn der Event-Handler-Eigenschaft der Schnittstelle zuweisen:

onanimationstart = (event) => { }

Ereignistyp

Ein AnimationEvent. Erbt von Event.

Beispiele

Im folgenden Beispiel wird auf das animationstart-Ereignis gewartet und eine Meldung protokolliert, wenn es ausgelöst wird:

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

animated.addEventListener("animationstart", () => {
  console.log("Animation started");
});

Dasselbe mit onanimationstart (beachten Sie jedoch, dass dadurch gegebenenfalls andere mit onanimationstart hinzugefügte Event-Listener ersetzt werden):

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

animated.onanimationstart = () => {
  console.log("Animation started");
};

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

Browser-Kompatibilität

Siehe auch

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

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