Latest web development tutorials

HTML-DOM-Art Übergangseigenschaften

Style-Objekt Referenz Style - Objekte

Beispiele

Der Mauszeiger schwebt über das div-Element, wird es allmählich sein Aussehen zu ändern:

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

Versuchen »

Definition und Verwendung

Übergang Eigenschaft ist eine zusammenfassende Eigenschaft für die Einstellung der vier Übergangseigenschaften:

transitionProperty, transitionDuration, transitionTimingFunction und transitionDelay.

Hinweis: Setzen Sie immer transitionDuration Eigenschaft, da sonst die Dauer Null ist , wird es nicht Übergangseffekte erzeugen.


Browser-Unterstützung

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 10, Firefox, Opera und Chrome unterstützen, den Übergang Eigenschaft.

Safari unterstützt eine weitere Alternative der Eigenschaft, die WebkitTransition Eigenschaft zuzuschreiben.

Hinweis: Internet Explorer 9 und früheren Versionen nicht den Übergang Eigenschaft unterstützen.

Grammatik

Returns Übergang Attribute:

object .style.transition

Stellen Sie die Übergangseigenschaften:

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

Eigenschaft Wert

描述
transitionProperty 规定应用过渡效果的 CSS 属性的名称。
transitionDuration 规定完成过渡效果需要多少秒或毫秒。
transitionTimingFunction 规定过渡效果的速度曲线。
transitionDelay 定义过渡效果何时开始。
initial 设置该属性为它的默认值。请参阅 initial
inherit 从父元素继承该属性。请参阅 inherit

Technische Details

Standard: alle 0 Leichtigkeit 0
Rückkehr: Zeichenfolge, die den Übergangselement Attribute.
CSS-Version CSS3


In Verbindung stehende Artikel

CSS Referenz: Transition Properties


Style-Objekt Referenz Style - Objekte