CSS Referenzhandbuch

CSS @Regel (RULES)

CSS Eigenschaftsliste

CSS3 transition-timing-function Eigenschaft CSS3 transition-duration Eigenschaft

CSS3 transition-Verwendung und Beispiel der property-Eigenschaft

transition-Die propertyCSS-Eigenschaft legt den Namen der CSS-Eigenschaft fest, auf die der Übergangseffekt angewendet werden soll.

Die folgende Tabelle enthält die Verwendungshinweise und Versionshistorie dieser Eigenschaft sowie die Syntax ihrer Verwendung in JavaScript-Skripten.

Standardwert:	all
Geeignet für:	Alle Elemente::before und::after Pseudo-Element
Vererbung:	Keine
Animierbar:	Nein.Bitte参见 Animationseigenschaft。
Version：	CSS3neue Funktion
JavaScript-Syntax：	object.style.transitionProperty="width,height"

transition-property-Syntax

Die Syntax dieser Eigenschaft ist wie folgt：

transition-property:　　[,　, ... ]　|　none　|　all　|　initial　|　inherit
　where　　is　a　CSS　property　name

Der folgende Beispiel zeigt, wie man transition verwendet-property-Eigenschaft.

Beispiel

button　{
　　　　background:　#fd7c2a;
　　　　/*　Für　Safari　3.0+　*/
　　　　-webkit-transition-property:　background;
　　　　-webkit-transition-duration:　2s;
　　　　
　　　　transition-property:　background;
　　　　transition-duration:　2s;
}
button:hover　{
　　　　background:　#3cc16e;
}

Testen Sie es heraus‹/›

Eigenschaftswert

Die folgende Tabelle beschreibt die Werte dieser Eigenschaft.

Wert	Beschreibung
none	Keine Eigenschaft erhält den Übergangseffekt.
all	Alle Eigenschaften erhalten den Übergangseffekt. Dies ist der Standardwert.
initial	Setzen Sie diesen Wert auf seinen Standardwert.
inherit	Wenn angegeben, wird der transition der übergeordneten Elemente verwendet.-property-Wert der Eigenschaft.

Browserkompatibilität

transition-property-Eigenschaft die Kompatibilität der Browser, die Zahlen in der folgenden Tabelle stellen die niedrigste Versionsnummer dar, die die Eigenschaft unterstützt; alle gängigen Browser unterstützen diese Eigenschaft.

	Firefox 4+ ^-moz-，16 + Google Chrome 4+ ^-webkit-，26 + Internet Explorer 10+ Apple Safari 3.1+ ^-webkit-，6.1+ Opera 10.5+ ^-o-，12.1+

Weitere Lesungen

Bitte beziehen Sie sich auf die folgenden Anleitungen：CSS3 Transitions。

zusammenhängende Eigenschaften：transition，transition-delay，transition-duration，transition-timing-function。

CSS3 transition-timing-function Eigenschaft CSS3 transition-duration Eigenschaft