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

Selektor {
	transition-property: Wert;
}

Beispiel

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

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

#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:

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

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

Siehe auch

die Eigenschaft transition-duration,
die die Dauer des Übergangs festlegt
die Eigenschaft transition-delay,
die die Verzögerung vor dem Übergang festlegt
die Eigenschaft transition-timing-function,
die die Zeitfunktion für den Übergang festlegt
die Eigenschaft transition,
die die Kurzschreibweise für Übergänge ist
die Eigenschaft animation,
mit der Animationen erstellt werden können