Signatur
Beschreibung
Die schreibgeschützte Eigenschaft animationName eines AnimationEvent enthält den Namen der CSS-Animation, also den Wert der Eigenschaft animation-name, die zum Ereignis gehört. Er entspricht dem Bezeichner der zugehörigen @keyframes-Regel.
Gebraucht wird die Eigenschaft vor allem, wenn ein Element mehrere Animationen hat oder nacheinander verschiedene abspielt. In den Handlern für animationstart, animationiteration, animationend und animationcancel lässt sich damit feststellen, welche Animation das Ereignis ausgelöst hat. So kann man gezielt reagieren, etwa ein Element erst nach dem Ende einer bestimmten Ausblend-Animation entfernen.
Weil Animationsereignisse im DOM nach oben weitergereicht werden (Bubbling), erreichen auch Ereignisse von Kind-Elementen den Handler des Elternelements. Deshalb sollte man neben animationName oft auch event.target prüfen.
Rückgabewert
animation-name bzw. in der @keyframes-Regel steht, zum Beispiel "fadeOut". Bei einem mit dem Konstruktor erzeugten Ereignis ohne Angabe ist er ein leerer String "".Beispiele
Element nach Ende einer bestimmten Animation entfernen
// CSS: .toast.hide { animation: fadeOut 300ms forwards; }
// @keyframes fadeOut { to { opacity: 0; } }
const toast = document.querySelector('.toast');
const onEnd = (event) => {
// Nur auf die eigene Ausblend-Animation reagieren, nicht auf Kind-Elemente
if (event.target !== toast || event.animationName !== 'fadeOut') return;
toast.removeEventListener('animationend', onEnd);
toast.remove();
console.log(`Entfernt nach Animation: ${event.animationName}`);
};
toast.addEventListener('animationend', onEnd);
toast.classList.add('hide');Mehrere Animationen auf einem Element unterscheiden
// CSS: .box { animation: slideIn 500ms, pulse 1s 500ms 3; }
const box = document.querySelector('.box');
const handlers = {
slideIn: () => console.log('Eingeflogen'),
pulse: () => console.log('Pulsieren beendet')
};
box.addEventListener('animationend', ({ animationName }) => {
handlers[animationName]?.();
});
box.addEventListener('animationiteration', (e) => {
console.log(`${e.animationName}: Durchlauf nach ${e.elapsedTime}s`);
});Synthetisches AnimationEvent mit dem Konstruktor
const evt = new AnimationEvent('animationend', {
animationName: 'spin',
elapsedTime: 2,
bubbles: true
});
document.body.onanimationend = (e) => console.log(e.animationName, e.elapsedTime);
document.body.dispatchEvent(evt);
console.log(new AnimationEvent('animationstart').animationName === '');// Wichtig · Fallstricke
- Schreibgeschützt: Eine Zuweisung an
event.animationNamehat keine Wirkung. Im strikten Modus wird einTypeErrorausgelöst. Den Wert kann man nur über das Initialisierungsobjekt vonnew AnimationEvent()setzen. - Bubbling: Animationsereignisse von Kind-Elementen steigen nach oben auf. Prüfe deshalb zusätzlich
event.target, sonst reagiert der Handler versehentlich auf fremde Animationen mit gleichem Namen. - Keine Ereignisse ohne Laufzeit: Ist
animation-name: nonegesetzt oder existiert keine passende@keyframes-Regel, werden keine Ereignisse ausgelöst. Beianimation-duration: 0skommen zwaranimationstartundanimationend, aber sofort hintereinander. - Nur CSS-Animationen: Animationen, die mit der Web Animations API (
element.animate()) gestartet werden, lösen keineAnimationEvents aus. Dort nutzt man stattdessenanimation.finishedoder dasfinish-Ereignis. Für CSS-Übergänge gibt esTransitionEvent.propertyName. - Kompatibilität: Wird von allen modernen Browsern unterstützt. Das Ereignis
animationcancelwird von älteren Browsern teilweise nicht ausgelöst. Präfixe wiewebkitAnimationEndbraucht man nur noch für sehr alte WebKit-Versionen.