transition-durationLastnost, ki se običajno uporablja kot del transitionokrajšavi, se uporablja za določitev trajanja določenega prehoda. To pomeni, koliko časa bo potreben, da ciljni element preide med dve opredeljeni stanji.
.example ( transition-duration: 3s; )Vrednost je lahko ena od naslednjih:
- Veljavna časovna vrednost (definirana v sekundah ali milisekundah)
- Seznam časovnih vrednosti, ločenih z vejico, za prehod več lastnosti na en element
Privzeta vrednost za transition-durationje 0s, kar pomeni, da ne bo prišlo do prehoda in bo sprememba lastnosti takoj, tudi če so definirane druge lastnosti, povezane s prehodom. Časovno vrednost lahko izrazimo kot decimalno številko za natančnejši čas in negativne vrednosti niso dovoljene.
Naslednji CodePen prikazuje učinek lebdenja na polju, ki uporablja transition-durationvrednost 1sza postopno spreminjanje barve ozadja:
Za združljivost v vseh podpornih brskalnikih so potrebne predpone ponudnikov s standardno sintakso, razglašeno za zadnjo:
.example ( -webkit-transition-duration: 700ms; -moz-transition-duration: 700ms; -o-transition-duration: 700ms; transition-duration: 700ms; )IE10 (prva stabilna različica IE, ki podpira transition-duration) ne zahteva -ms-predpone.
Podpora za brskalnik
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Deluje | Deluje | 4+ | 10,5+ | 10+ | 2.1+ | 3,2+ |