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.
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 gleich dem absoluten Wert der Verzögerung ausgelöst wird (und entsprechend wird die Animation zu diesem Zeitpunkt in der Sequenz abgespielt).
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignishandlereigenschaft.
addEventListener("animationstart", (event) => { })
onanimationstart = (event) => { }
Ereignistyp
Ein AnimationEvent. Erbt von Event.
Beispiele
Dieses Beispiel hört 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 verwendet:
const animated = document.querySelector(".animated");
animated.onanimationstart = () => {
console.log("Animation started");
};
Live-Beispiel
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
.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
- Verwendung von CSS-Animationen
AnimationEvent- Verwandte Ereignisse:
animationend,animationiteration,animationcancel