CSSTransition.transitionProperty — Eigenschaft · JavaScript-Referenz

Signatur

CSSTransition.transitionProperty

Beschreibung

transitionProperty gibt an, welche CSS-Eigenschaft ein bestimmtes CSSTransition-Objekt animiert. Solche Objekte liefern Element.getAnimations() und document.getAnimations(), sobald der Browser wegen einer Stiländerung eine CSS-Transition startet. Der Wert ist ein String im CSS-Format mit Bindestrichen, z. B. "background-color", bei benutzerdefinierten Eigenschaften etwa "--akzentfarbe".

Wichtig ist das Wort erweitert: Wenn im CSS eine Kurzschreibweise wie transition: margin 0.3s oder transition: all 1s steht, erzeugt der Browser für jede einzelne Eigenschaft eine eigene CSSTransition. transitionProperty enthält dann nie "margin" oder "all", sondern immer die konkrete Einzeleigenschaft, also "margin-top", "margin-right" usw.

Typische Einsatzfälle: in Skripten mit mehreren gleichzeitigen Transitions gezielt eine bestimmte finden, um sie anzuhalten, abzubrechen oder auf ihr Ende zu warten (animation.finished). Außerdem hilft die Eigenschaft beim Debuggen, wenn man sehen will, welche Transitions gerade laufen. Die Eigenschaft ist nur lesbar – eine Zuweisung ändert nichts.

Rückgabewert

Typ

string

Beschreibung

Name der animierten CSS-Einzeleigenschaft in CSS-Schreibweise (z. B. "opacity", "border-top-width", "--mein-wert").

Beispiele

Laufende Transitions eines Elements auflisten

// CSS: .box { transition: opacity 0.5s, transform 0.5s; }
const box = document.querySelector('.box');

box.style.opacity = '0.2';
box.style.transform = 'translateX(100px)';

// Transitions werden erst nach der Stilberechnung erzeugt
requestAnimationFrame(() => {
  const namen = box.getAnimations()
    .filter((a) => a instanceof CSSTransition)
    .map((t) => t.transitionProperty);
  console.log(namen);
});

["opacity", "transform"]

Kurzschreibweise wird in Einzeleigenschaften aufgeteilt

// CSS: .karte { margin: 0; transition: margin 0.4s ease; }
const karte = document.querySelector('.karte');

// Stil erzwingen, damit der Ausgangswert feststeht
getComputedStyle(karte).margin;
karte.style.margin = '20px';

const eigenschaften = karte.getAnimations()
  .filter((a) => a instanceof CSSTransition)
  .map((t) => t.transitionProperty);

console.log(eigenschaften);

["margin-bottom", "margin-left", "margin-right", "margin-top"]

Auf das Ende einer bestimmten Transition warten

// CSS: .panel { transition: height 0.3s, background-color 1s; }
const panel = document.querySelector('.panel');

const warteAufTransition = async (element, eigenschaft) => {
  const transition = element.getAnimations().find(
    (a) => a instanceof CSSTransition && a.transitionProperty === eigenschaft
  );
  if (!transition) return; // keine laufende Transition
  try {
    await transition.finished;
  } catch {
    // Transition wurde abgebrochen (z. B. Stil erneut geändert)
  }
};

getComputedStyle(panel).height;
panel.style.height = '300px';
panel.style.backgroundColor = 'tomato';

await warteAufTransition(panel, 'height');
console.log('Höhe fertig animiert – Hintergrund läuft evtl. noch');

Höhe fertig animiert – Hintergrund läuft evtl. noch

// Wichtig · Fallstricke

Kein Shorthand-Name: Vergleiche nie mit "margin", "border" oder "all" – solche Werte kommen nicht vor. Vergleiche immer mit der konkreten Einzeleigenschaft.
Nicht mit transition-property verwechseln: Die CSS-Eigenschaft transition-property bzw. style.transitionProperty ist die Konfiguration im Stylesheet (kann eine Liste oder all sein). CSSTransition.transitionProperty beschreibt dagegen eine einzelne, tatsächlich laufende Transition.
Zeitpunkt: Eine CSSTransition gibt es erst, nachdem der Browser den geänderten Stil berechnet hat. Außerdem braucht es einen berechneten Ausgangswert (z. B. durch getComputedStyle() oder Lesen von offsetWidth), sonst startet gar keine Transition. Nach dem Ende taucht das Objekt nicht mehr in getAnimations() auf.
Bei TransitionEvents (transitionend usw.) steht dieselbe Information in event.propertyName.
Browser-Unterstützung: Chrome/Edge 84+, Firefox 75+, Safari 13.1+. Ältere Browser kennen CSSTransition nicht – vorher mit typeof CSSTransition !== 'undefined' prüfen.

Siehe auch

CSSTransition Element.getAnimations() Document.getAnimations() Animation.finished TransitionEvent.propertyName CSSAnimation.animationName