transition-duration

Die transition-duration Eigenschaft, die normalerweise als Teil der transition Kurzschreibweise verwendet wird, dient dazu, die Dauer eines bestimmten Übergangs zu definieren. Das heißt, die Zeitspanne, die ein Ziel-Element benötigt, um zwischen zwei definierten Zuständen zu wechseln.

.example {
    transition-duration: 3s;
}

Der Wert kann einer der folgenden sein

• Ein gültiger Zeitwert (definiert in Sekunden oder Millisekunden)
• Eine durch Kommas getrennte Liste von Zeitwerten, um mehrere Eigenschaften eines einzelnen Elements zu animieren

Der Standardwert für transition-duration ist 0s, was bedeutet, dass kein Übergang stattfindet und die Eigenschaftsänderung sofort erfolgt, auch wenn andere übergangsbezogene Eigenschaften definiert sind. Der Zeitwert kann als Dezimalzahl für eine präzisere Zeitsteuerung ausgedrückt werden, negative Werte sind nicht erlaubt.

Das folgende CodePen zeigt einen Hover-Effekt auf einer Box, der einen transition-duration Wert von 1s verwendet, um die Hintergrundfarbe allmählich zu ändern

Check out this Pen!

Für die Kompatibilität in allen unterstützenden Browsern sind Vendor-Präfixe erforderlich, wobei die Standard-Syntax zuletzt deklariert wird

.example {
    -webkit-transition-duration: 700ms;
    -moz-transition-duration: 700ms;
    -o-transition-duration: 700ms;
    transition-duration: 700ms;
}

IE10 (die erste stabile Version von IE, die transition-duration unterstützt) benötigt das -ms- Präfix nicht.

Verwandte Eigenschaften

• transition
• transition-property
• transition-timing-function
• transition-delay

Weitere Ressourcen

• transition-duration bei W3C
• transition-duration bei MDN

Browser-Unterstützung

Chrome	Safari	Firefox	Opera	IE	Android	iOS
Funktioniert	Funktioniert	4+	10.5+	10+	2.1+	3.2+