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 December 2019.

Das animationstart-Ereignis wird ausgelöst, wenn eine CSS-Animation begonnen hat. Wenn ein animation-delay vorhanden ist, wird dieses Ereignis ausgelöst, sobald die Verzögerungszeit abgelaufen ist. Eine negative Verzögerung wird dazu führen, dass das Ereignis mit einem elapsedTime, das dem absoluten Wert der Verzögerung entspricht, ausgelöst wird (und entsprechend wird die Animation zu diesem Zeitpunkt im Sequenzindex beginnen).

Syntax

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

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

onanimationstart = (event) => { }

Ereignistyp

Ein AnimationEvent. Erbt von Event.

Event AnimationEvent

Ereigniseigenschaften

Erbt auch Eigenschaften von seinem Elternteil Event.

AnimationEvent.animationName Schreibgeschützt

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

AnimationEvent.elapsedTime Schreibgeschützt

Ein float, der die Zeitspanne in Sekunden angibt, wie lange die Animation bereits läuft, wenn dieses Ereignis ausgelöst wird, ohne die Pausenzeit der Animation. Bei einem 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 einem elapsedTime ausgelöst, das (-1 * Verzögerung) enthält.

AnimationEvent.pseudoElement Schreibgeschützt

Ein String, der mit '::' beginnt und 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 selbst läuft, ein leerer String: ''.

Beispiele

Dies horcht 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 mit 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

Siehe auch