Element: animationstart 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 animationstart-Ereignis wird ausgelöst, wenn eine CSS-Animation gestartet wird. Wenn es eine animation-delay gibt, wird dieses Ereignis ausgelöst, sobald der Verzögerungszeitraum abgelaufen ist. Eine negative Verzögerung führt dazu, dass das Ereignis mit einer elapsedTime ausgelöst wird, die dem absoluten Wert der Verzögerung entspricht (und entsprechend beginnt die Animation, zu diesem Zeitindex in der Sequenz zu spielen).

Syntax

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

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

onanimationstart = (event) => { }

Ereignistyp

Ein AnimationEvent. Erbt von Event.

Ereigniseigenschaften

Erbten auch Eigenschaften von ihrem 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 Dauer in Sekunden angibt, die die Animation gelaufen ist, als dieses Ereignis ausgelöst wurde, ohne Zeit, in der die Animation pausierte. Für ein animationstart-Ereignis ist elapsedTime 0.0, es sei denn, es gab einen negativen Wert für animation-delay, in welchem Fall das Ereignis mit elapsedTime, das (-1 * delay) enthält, ausgelöst wird.
AnimationEvent.pseudoElement Schreibgeschützt: Ein String, beginnend mit '::', der den Namen des Pseudo-Elements enthält, auf dem die Animation ausgeführt wird. Wenn die Animation nicht auf einem Pseudo-Element, sondern auf dem Element ausgeführt wird, ein leerer String: ''.

Beispiele

Dies lauscht auf das animationstart-Ereignis und protokolliert eine Nachricht, wenn es ausgelöst wird:

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

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

Dasselbe, aber mit onanimationstart:

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

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

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

Browser-Kompatibilität

Siehe auch

CSS-Animationen
CSS-Animationen verwenden
AnimationEvent
Verwandte Ereignisse: animationend, animationiteration, 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