Style transition-Eigenschaft

Definition und Verwendung

transition Diese Eigenschaft ist eine Abkürzung für die vier Übergangseigenschaften:

Anmerkung:Definieren Sie immer transitionDuration-EigenschaftSonst dauert der Übergang 0 Sekunden und der Übergang ist ungültig.

Weitere Informationen:

CSS-Referenzhandbuch:transition-Eigenschaft

Beispiel

Bewegen Sie die Maus über das div-Element, um seine Aussehen allmählich zu ändern:

document.getElementById("myDIV").style.transition = "all 2s";

Versuchen Sie es selbst

Syntax

Rückgabe der transition-Eigenschaft:

object.style.transition

Setzen Sie die transition-Eigenschaft:

object.style.transition = "property duration timing-function delay|initial|inherit"

Eigenschaftswert

Wert Beschreibung
transitionProperty Bestimmt den Namen der CSS-Eigenschaft, auf die der Übergangseffekt angewendet wird.
transitionDuration Bestimmt, wie viele Sekunden oder Millisekunden der Übergangseffekt dauern soll.
transitionTimingFunction Bestimmt die Geschwindigkeitskurve des Übergangseffekts.
transitionDelay Definiert, wann der Übergangseffekt beginnt.
initial Diese Eigenschaft auf ihren Standardwert setzen. Siehe initial.
inherit Diese Eigenschaft wird von ihrem übergeordneten Element geerbt. Siehe inherit.

Technische Details

Standardwert: all 0 ease 0
Rückgabewert: Zeichenkette, die den transition-Eigenschaft.
CSS-Version: CSS3

Browser-Unterstützung

Die Zahlen in der Tabelle geben die Versionsnummer des ersten Browsers an, der diese Eigenschaft vollständig unterstützt.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
26.0 10.0 16.0 6.1 12.1