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 March 2020.

Das animationstart-Ereignis wird ausgelöst, wenn eine CSS-Animation gestartet wurde. Wenn es eine animation-delay gibt, wird dieses Ereignis ausgelöst, sobald die Verzögerungszeit 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 wird die Animation zu diesem Zeitpunkt in der Sequenz zu spielen beginnen).

Syntax

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

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

onanimationstart = (event) => {};

Ereignistyp

Ein AnimationEvent, vererbt von Event.

Event AnimationEvent

Ereigniseigenschaften

Erbt auch Eigenschaften von seinem Elternteil Event.

AnimationEvent.animationName Nur lesbar

Ein String, der den Wert des animation-name enthält, der die Animation erzeugt hat.

AnimationEvent.elapsedTime Nur lesbar

Ein float, das die Laufzeit der Animation in Sekunden angibt, als dieses Ereignis ausgelöst wurde, ohne die Zeit zu berücksichtigen, 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, das (-1 * Verzögerung) enthält, ausgelöst.

AnimationEvent.pseudoElement Nur lesbar

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, ein leerer String: ''.

Beispiele

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

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

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

Dasselbe, aber unter Verwendung von onanimationstart:

js
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

js
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

BCD tables only load in the browser

Siehe auch