Eigenschaft transition-property

Die Eigenschaft transition-property legt fest, welche Eigenschaft mit einem transition-Übergang animiert wird. Als Wert sollte der Name der CSS-Eigenschaft angegeben werden, die animiert werden soll. Wenn der Wert all angegeben wird (dies ist der Standardwert) - werden alle Eigenschaften gleichzeitig animiert.

Syntax

cssSelektor {
  transition-property: Wert;
}

Beispiel

Bewegen Sie die Maus über den Block - er ändert seine Breite sanft, da transition-property den Wert width hat:

html<div id="elem"></div>

css#elem {
  border: 1px solid black;
  transition-duration: 2s;
  transition-property: width;
  height: 50px;
  width: 100px;
}
#elem:hover {
  width: 400px;
}

Результат:

Beispiel . Wert all

In diesem Beispiel hat transition-property den Wert all - daher werden alle Eigenschaften, die für den hover-Zustand geschrieben sind (in unserem Fall width und height), sanft geändert. Alle Änderungen erfolgen in der gleichen Zeit, die in transition-duration angegeben ist:

html<div id="elem"></div>

css#elem {
  border: 1px solid black;
  transition-duration: 2s;
  transition-property: all;
  height: 25px;
  width: 100px;
}
#elem:hover {
  height: 50px;
  width: 400px;
}

Результат:

Siehe auch