DietransitionProperty-Eigenschaft desCSSTransition-Interfaces liefert denerweiterten Übergangseigenschaftsnamen der Transition zurück. Dies ist die ausgeschriebene CSS-Eigenschaft, für die die Transition generiert wurde.

Wert

Ein String.

Beispiele

Rückgabe der transitionProperty

Die Transition im folgenden Beispiel ändert die Breite des Kastens beim Hover-Effekt. Der Aufruf vonElement.getAnimations() gibt ein Array allerAnimation-Objekte zurück. In unserem Fall wird einCSSTransition-Objekt zurückgegeben, das dieerzeugte Animation darstellt. DietransitionProperty-Eigenschaft gibt die Eigenschaftzurück, für die die Transition erstellt wurde, in diesem Fallwidth.

.box {  background-color: #165baa;  color: white;  width: 100px;  height: 100px;  transition: width 4s;}.box:hover {  width: 200px;}

const item = document.querySelector(".box");item.addEventListener("transitionrun", () => {  let animations = document.querySelector(".box").getAnimations();  console.log(animations[0].propertyName);});

Spezifikationen

Browser-Kompatibilität