transition-durationImovine, obično se koristi kao dio transitionstenogram, koristi se za definiranje trajanja određene tranzicije. Odnosno, vrijeme potrebno da prijeđe ciljani element između dva definirana stanja.
.example ( transition-duration: 3s; )Vrijednost može biti jedna od sljedećih:
- Važeća vrijednost vremena (definirana u sekundama ili milisekundama)
- Popis vremenskih vrijednosti odvojenih zarezom za prijelaz više svojstava na jedan element
Zadana vrijednost za transition-durationje 0s, što znači da se neće dogoditi prijelaz i da će se promjena svojstva izvršiti odmah, čak i ako su definirana druga svojstva povezana s prijelazom. Vrijednost vremena može se izraziti kao decimalni broj za preciznije određivanje vremena i negativne vrijednosti nisu dopuštene.
Sljedeći CodePen prikazuje efekt lebdenja na okviru koji koristi transition-durationvrijednost 1sza postupnu promjenu boje pozadine:
Za kompatibilnost u svim podržanim preglednicima potrebni su prefiksi dobavljača, sa standardnom sintaksom koja je proglašena zadnjom:
.example ( -webkit-transition-duration: 700ms; -moz-transition-duration: 700ms; -o-transition-duration: 700ms; transition-duration: 700ms; )IE10 (prva stabilna verzija IE-a koja podržava transition-duration) ne zahtijeva -ms-prefiks.
Podrška preglednika
| Krom | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Djela | Djela | 4+ | 10,5+ | 10+ | 2.1+ | 3,2+ |