Animation.id — Eigenschaft · JavaScript-Referenz

Signatur

Animation.id

Beschreibung

Die Eigenschaft Animation.id enthält eine Kennung als String. Mit ihr lässt sich eine bestimmte Animation wiederfinden, etwa unter den vielen Animationen, die document.getAnimations() oder element.getAnimations() zurückgeben. Standardmäßig ist der Wert ein leerer String "".

Setzen lässt sich die Kennung auf zwei Arten: direkt über die Zuweisung animation.id = "name" oder beim Erstellen über die Option id von Element.prototype.animate(). Beide Wege führen zum selben Ergebnis.

Die Kennung ist nicht eindeutig und hat nichts mit dem HTML-Attribut id zu tun. Der Browser prüft nicht, ob sie doppelt vorkommt, und sie wirkt sich weder auf den Ablauf noch auf das Aussehen der Animation aus. Nützlich ist sie vor allem beim Debuggen (die Entwicklerwerkzeuge zeigen sie im Animations-Panel an), beim Protokollieren und um Animationen gezielt zu steuern.

Rückgabewert

Typ

string

Beschreibung

Die aktuell gesetzte Kennung der Animation. Ohne Zuweisung ist das ein leerer String "". Zugewiesene Werte, die keine Strings sind, werden in einen String umgewandelt.

Beispiele

Kennung beim Erstellen mit animate() vergeben

const box = document.querySelector('.box');

const fadeIn = box.animate(
  [{ opacity: 0 }, { opacity: 1 }],
  { duration: 500, fill: 'forwards', id: 'fade-in' }
);

console.log(fadeIn.id);

fade-in

Kennung nachträglich setzen und lesen

const effect = new KeyframeEffect(
  document.querySelector('.spinner'),
  [{ transform: 'rotate(0deg)' }, { transform: 'rotate(360deg)' }],
  { duration: 1000, iterations: Infinity }
);
const spin = new Animation(effect, document.timeline);

console.log(JSON.stringify(spin.id)); // Standardwert
spin.id = 'spinner-rotation';
spin.play();
console.log(spin.id);

"" spinner-rotation

Bestimmte Animationen über die Kennung finden und pausieren

const pauseById = (id) => {
  const matches = document.getAnimations().filter((a) => a.id === id);
  matches.forEach((a) => a.pause());
  return matches.length;
};

document.querySelectorAll('.card').forEach((card, i) => {
  card.animate(
    [{ transform: 'translateY(0)' }, { transform: 'translateY(-10px)' }],
    { duration: 800, iterations: Infinity, direction: 'alternate', delay: i * 100, id: 'hover-bounce' }
  );
});

console.log(`Pausiert: ${pauseById('hover-bounce')}`);

Pausiert: 3 (bei drei .card-Elementen)

// Wichtig · Fallstricke

Nicht eindeutig: Mehrere Animationen können dieselbe id haben. Wenn du nach der Kennung suchst, rechne also immer mit mehreren Treffern (filter() statt find()).
CSS-Animationen und -Übergänge: Bei CSSAnimation- und CSSTransition-Objekten ist id standardmäßig leer. Der Name der Keyframes steht stattdessen in CSSAnimation.animationName, die animierte Eigenschaft in CSSTransition.transitionProperty.
Typumwandlung: Zuweisungen werden in einen String umgewandelt. anim.id = 42 ergibt also "42" und anim.id = null ergibt "null".
Kompatibilität: Wird von Chrome/Edge 75+, Firefox 48+ und Safari 13.1+ unterstützt. In älteren Browsern fehlt die Web Animations API teilweise. Prüfe sie bei Bedarf mit 'animate' in Element.prototype.

Siehe auch

Animation Element.prototype.animate() Document.prototype.getAnimations() Element.prototype.getAnimations() Animation.playState KeyframeEffect Animation.overallProgress