Die transition-durationEigenschaft, die normalerweise als Teil der transitionKurzform verwendet wird, wird verwendet, um die Dauer eines bestimmten Übergangs zu definieren. Das heißt, die Zeit, die das Zielelement benötigt, um zwischen zwei definierten Zuständen überzugehen.
.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 für den Übergang mehrerer Eigenschaften zu einem einzelnen Element
Der Standardwert für transition-durationist 0s, was bedeutet, dass kein Übergang stattfindet und die Eigenschaftsänderung sofort stattfindet, selbst wenn die anderen übergangsbezogenen Eigenschaften definiert sind. Der Zeitwert kann für ein genaueres Timing als dezimalbasierte Zahl ausgedrückt werden, und negative Werte sind nicht zulässig.
Der folgende CodePen zeigt einen Hover-Effekt auf einem Feld, bei dem der transition-durationWert von verwendet wird 1s, um die Hintergrundfarbe schrittweise zu ändern:
Für die Kompatibilität in allen unterstützenden Browsern sind Herstellerpräfixe erforderlich, wobei die Standardsyntax 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 unterstützt wird transition-duration) benötigt kein -ms-Präfix.
Browser-Unterstützung
| Chrom | Safari | Feuerfuchs | Oper | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Funktioniert | Funktioniert | 4+ | 10,5+ | 10+ | 2.1+ | 3.2+ |