transition-durationVlastnosť, bežne používajú ako súčasť transitionskratku, sa používa na definovanie trvania určeného prechodu. To znamená čas, ktorý bude potrebný na prechod cieľového prvku medzi dvoma definovanými stavmi.
.example ( transition-duration: 3s; )Hodnota môže byť jedna z nasledujúcich:
- Platná hodnota času (definovaná v sekundách alebo milisekundách)
- Zoznam časových hodnôt oddelených čiarkami na prechod viacerých vlastností na jeden prvok
Predvolená hodnota pre transition-durationje 0s, čo znamená, že nedôjde k žiadnemu prechodu a zmena vlastnosti sa uskutoční okamžite, aj keď sú definované ďalšie vlastnosti súvisiace s prechodom. Časovú hodnotu je možné pre presnejšie načasovanie vyjadriť ako desatinné číslo a záporné hodnoty nie sú povolené.
Nasledujúci kód CodePen zobrazuje efekt umiestnenia kurzora myši na rám, ktorý pomocou transition-durationhodnoty 1spostupne mení farbu pozadia:
Kvôli kompatibilite vo všetkých podporovaných prehľadávačoch sú vyžadované predpony dodávateľov so štandardnou syntaxou deklarovanou ako posledná:
.example ( -webkit-transition-duration: 700ms; -moz-transition-duration: 700ms; -o-transition-duration: 700ms; transition-duration: 700ms; )IE10 (prvá stabilná verzia IE, ktorá podporuje transition-duration) nevyžaduje -ms-predponu.
Podpora prehľadávača
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Tvorba | Tvorba | 4+ | 10,5+ | 10+ | 2,1+ | 3,2+ |