CSS-Referenzhandbuch

CSS @Regel(RULES)

Vollständiges Verzeichnis der CSS-Eigenschaften

CSS3 transition-property Eigenschaft CSS3 transition-delay Eigenschaft

CSS3 transition-Verwendung und Beispiel der Eigenschaft duration

transition-Die CSS-Eigenschaft duration bestimmt die Anzahl der Sekunden oder Millisekunden, die für die Abwicklung der Übergangsanimation erforderlich sind.

Die folgende Tabelle enthält Anweisungen und Versionshistorie der Verwendung dieses Attributs sowie die Syntax seiner Verwendung in JavaScript-Skripten.

Standardwert:	0s
Geeignet für:	Alle Elemente::before und::after Pseudo-Element
Vererben:	Keine
Animierbar:	Nein.Siehe auch Animationseigenschaft.
Version:	CSS3neue Funktion
JavaScript-Syntax:	object.style.transitionDuration="5s"

transition-Syntax der Verwendung von duration

Die Syntax dieser Eigenschaft ist wie folgt:

transition-duration:　time　|　initial　|　inherit

Der folgende Beispiel zeigt, wie man transition verwendet-duration 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
time	Geben Sie die Zeit an, die für die Abwicklung des Übergangs erforderlich ist. Der Standardwert ist 0s. Negative Werte sind ungültig.
initial	Setzen Sie diesen Wert auf seinen Standardwert.
inherit	Wenn angegeben, verwendet der verknüpfte Element sein Elternelement transition.-Wert der Eigenschaft duration.

Browserkompatibilität

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

	Firefox 5+ ^-moz-,15 + Google Chrome 4+ ^-webkit- Internet Explorer 10+ Apple Safari 4+ ^-webkit- Opera 12+ ^-o-,15+ ^-webkit-

Weiterlesen

Bitte beziehen Sie sich auf die folgenden Anleitungen:CSS3 Transitions.

CSS3 transition-property Eigenschaft CSS3 transition-delay Eigenschaft