transition-durationNuosavybė, paprastai naudojamas kaip dalis transitionsutrumpinta, naudojamas apibrėžti tam tikrą perėjimo trukmę. Tai yra laikas, kurio prireiks tiksliniam elementui pereiti tarp dviejų apibrėžtų būsenų.
.example ( transition-duration: 3s; )Vertė gali būti viena iš šių:
- Tinkama laiko vertė (apibrėžta sekundėmis arba milisekundėmis)
- Kableliais atskirtas laiko verčių sąrašas, skirtas perkelti kelias vieno elemento ypatybes
Numatytoji reikšmė transition-durationyra 0s, tai reiškia, kad perėjimas neįvyks, o ypatybė pasikeis iškart, net jei bus apibrėžtos kitos su perėjimu susijusios ypatybės. Laiko reikšmė gali būti išreikšta dešimtainiu skaičiumi, kad būtų tikslesnis laikas, o neigiamos vertės neleidžiamos.
Šiame „CodePen“ rodomas žymėjimas ant langelio, kuriame naudojama transition-durationreikšmė 1spalaipsniui keičiant fono spalvą:
Norint suderinti visas palaikomas naršykles, reikalingi tiekėjo priešdėliai, o standartinė sintaksė paskelbta paskutine:
.example ( -webkit-transition-duration: 700ms; -moz-transition-duration: 700ms; -o-transition-duration: 700ms; transition-duration: 700ms; )IE10 (pirmoji palaikoma IE versija transition-duration) nereikia -ms-prefikso.
Naršyklės palaikymas
| „Chrome“ | „Safari“ | „Firefox“ | Opera | T.Y | „Android“ | „iOS“ |
|---|---|---|---|---|---|---|
| Veikia | Veikia | 4+ | 10,5+ | 10+ | 2.1+ | 3.2+ |