transition-durationWłaściwość zwykle stosowane jako część transitionskrót stosowany jest w celu określenia czasu trwania określonym okresie przejściowym. Oznacza to, ile czasu zajmie przejście elementu docelowego między dwoma określonymi stanami.
.example ( transition-duration: 3s; )Wartość może być jedną z następujących:
- Prawidłowa wartość czasu (określona w sekundach lub milisekundach)
- Lista wartości czasu oddzielonych przecinkami do przełączania wielu właściwości w jednym elemencie
Wartość domyślna dla transition-durationto 0s, co oznacza, że żadne przejście nie będzie miało miejsca, a zmiana właściwości nastąpi natychmiast, nawet jeśli zdefiniowano inne właściwości związane z przejściem. Wartość czasu można wyrazić jako liczbę dziesiętną w celu dokładniejszego określenia czasu, a wartości ujemne nie są dozwolone.
Poniższy CodePen pokazuje efekt po najechaniu na pole, które używa transition-durationwartości 1sdo stopniowej zmiany koloru tła:
Aby zapewnić zgodność we wszystkich obsługiwanych przeglądarkach, wymagane są prefiksy dostawców, ze standardową składnią zadeklarowaną jako ostatnia:
.example ( -webkit-transition-duration: 700ms; -moz-transition-duration: 700ms; -o-transition-duration: 700ms; transition-duration: 700ms; )IE10 (pierwsza stabilna wersja IE do obsługi transition-duration) nie wymaga -ms-prefiksu.
Wsparcie przeglądarki
| Chrom | Safari | Firefox | Opera | TO ZNACZY | Android | iOS |
|---|---|---|---|---|---|---|
| Pracuje | Pracuje | 4+ | 10,5+ | 10+ | 2.1+ | 3.2+ |