Stilübergangseigenschaft _ _
Beispiel
Bewegen Sie den Mauszeiger über ein div-Element, um sein Aussehen schrittweise zu ändern:
document.getElementById("myDIV").style.transition = "all 2s";
Definition und Verwendung
Die Übergangseigenschaft ist eine Kurzformeigenschaft für die vier Übergangseigenschaften:
TransitionProperty, TransitionDuration, TransitionTimingFunction und TransitionDelay.
Hinweis: Geben Sie immer die Eigenschaft transitDuration an, andernfalls ist die Dauer 0 und der Übergang hat keine Auswirkung.
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die die Eigenschaft vollständig unterstützt.
Property | |||||
---|---|---|---|---|---|
transition | 26.0 | 10.0 | 16.0 | 6.1 3.1 WebkitTransition |
12.1 |
Syntax
Rückgabe der Übergangseigenschaft:
object.style.transition
Legen Sie die Übergangseigenschaft fest:
object.style.transition = "property duration timing-function delay|initial|inherit"
Eigenschaftswerte
Value | Description |
---|---|
transitionProperty | Specifies the name of the CSS property the transition effect is for |
transitionDuration | Specifies how many seconds or milliseconds the transition effect takes to complete |
transitionTimingFunction | Specifies the speed curve of the transition effect |
transitionDelay | Defines when the transition effect will start |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Technische Details
Standardwert: | alle 0 Leichtigkeit 0 |
---|---|
Rückgabewert: | Ein String, der die Übergangseigenschaft eines Elements darstellt |
CSS-Version | CSS3 |
Verwandte Seiten
CSS-Referenz: Übergangseigenschaft
❮ Style-Objekt