Stil transition Eigenschaft

Beispiele

Bewegen Sie den Mauszeiger über ein div-Element, und sein Aussehen ändert sich allmählich:

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

Die transition-Eigenschaft ist eine Kurzschreibweise zum Festlegen von vier transition-Eigenschaften:

transitionProperty, transitionDuration, transitionTimingFunction und transitionDelay.

Hinweis:Legen Sie immer die Eigenschaft transitionDuration fest, andernfalls ist die Dauer 0 und es tritt kein Übergangseffekt auf.

Internet Explorer 10, Firefox, Opera und Chrome unterstützen die transition-Eigenschaft.

Safari unterstützt eine Alternative zu dieser Eigenschaft, die WebkitTransition-Eigenschaft.

Hinweis:Internet Explorer 9 und frühere Versionen unterstützen die transition-Eigenschaft nicht.

Die transition-Eigenschaft zurückgeben:

object.style.transition

Die transition-Eigenschaft festlegen:

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

Wert	Beschreibung
transitionProperty	Gibt den Namen der CSS-Eigenschaft an, auf die der Übergangseffekt angewendet wird.
transitionDuration	Gibt an, wie viele Sekunden oder Millisekunden der Übergangseffekt benötigt, um abgeschlossen zu werden.
transitionTimingFunction	Gibt die Geschwindigkeitskurve des Übergangseffekts an.
transitionDelay	Definiert, wann der Übergangseffekt beginnt.
initial	Setzt diese Eigenschaft auf ihren Standardwert. Sieheinitial。
inherit	Erbt diese Eigenschaft von seinem Elternelement. Sieheinherit。

Standardwert:	all 0 ease 0
Rückgabewert:	Eine Zeichenfolge, die die transition-Eigenschaft eines Elements darstellt.
CSS-Version	CSS3