CSS transition-property Eigenschaft

Definition und Verwendung

Die transition-property-Eigenschaft legt den Namen der CSS-Attribute fest, die den Übergangseffekt erhalten. (Der Übergangseffekt beginnt, wenn das angegebene CSS-Attribut geändert wird).

Tipp:Übergangseffekte treten normalerweise auf, wenn der Benutzer den Mauszeiger über das Element bewegt.

Anmerkung:Legen Sie immer transition-duration Attribute, andernfalls wird kein Übergangseffekt erzeugt, wenn die Dauer 0 ist.

Weitere Informationen:

CSS-Tutorial:CSS Übergang

HTML DOM Referenzhandbuch:transitionProperty-Eigenschaft

Beispiel

Bewegen Sie den Mauszeiger über das div-Element, um einen Übergangseffekt mit einer glatten Änderung der Breite des Elements zu erzeugen:

div {
  transition-property: width;
}

Versuchen Sie es selbst

CSS-Syntax

transition-property: none|all|property;

Attributswert

Wert Beschreibung
none Kein Attribut erhält den Übergangseffekt.
alle Alle Attribute erhalten den Übergangseffekt.
property Liste der CSS-Attribute, die den Übergangseffekt erhalten, getrennt durch Kommas definiert.

Technische Details

Standardwert: alle
Vererbbarkeit: nein
Version: CSS3
JavaScript-Syntax: object.style.transitionProperty="width,height"

Browser-Unterstützung

Die Zahlen in der Tabelle verweisen auf die erste Browser-Version, die die Eigenschaft vollständig unterstützt.

Zahlen mit -webkit-, -moz- oder -o- als Präfix beziehen sich auf die erste Version, die verwendet wird.

Chrome IE / Edge Firefox Safari Opera
26.0
4.0 -webkit-		 10.0 16.0
4.0 -moz-		 6.1
3.1 -webkit-		 12.1
10.5 -o-