CSS transition Eigenschaft

Definition und Verwendung

Die transition-Eigenschaft ist eine Kurzform für vier Übergangseigenschaften:

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

Siehe auch:

CSS-Tutorial:CSS Übergang

HTML DOM Referenzhandbuch:transition-Eigenschaft

Beispiel

Bewegen Sie den Mauszeiger auf das div-Element, und die Breite wird von 100px allmählich auf 300px zunehmen:

div {
  width: 100px;
  transition: width 2s;
}

Versuchen Sie es selbst

CSS-Syntax

transition: property duration timing-function delay;

Eigenschaftswerte

Werte Beschreibung
transition-property Legt den Namen der CSS-Eigenschaft fest, die den Übergangseffekt setzt.
transition-duration Legt fest, wie viele Sekunden oder Millisekunden der Übergangseffekt dauert.
transition-timing-function Legt die Geschwindigkeit der Geschwindigkeitseffekte fest.
transition-delay Definiert, wann der Übergangseffekt beginnt.

Technische Details

Standardwert: alle 0 ease 0
Vererbbarkeit: nein
Version: CSS3
JavaScript-Syntax: object.style.transition="width 2s"

Browser-Unterstützung

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

Zahlen mit -webkit-, -moz- oder -o- als Präfix stellen die erste Version dar, die das Präfix verwendet.

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-