transition-durationĪpašumu, parasti izmanto kā daļu no transitionsaīsinājumus, tiek izmantota, lai noteiktu ilgumu noteiktā pārejas. Tas ir, cik ilgs laiks būs vajadzīgs, lai mērķa elements pārietu starp diviem definētiem stāvokļiem.
.example ( transition-duration: 3s; )Vērtība var būt viena no šīm:
- Derīga laika vērtība (noteikta sekundēs vai milisekundēs)
- Ar komatiem atdalīts laika vērtību saraksts vairāku īpašību pārejai uz vienu elementu
Noklusējuma vērtība transition-durationir 0s, kas nozīmē, ka pāreja nenotiks un rekvizītu maiņa notiks nekavējoties, pat ja ir definētas citas ar pāreju saistītās īpašības. Laika vērtību var izteikt kā ciparu, kas pamatojas uz decimālu, lai iegūtu precīzāku laiku, un negatīvās vērtības nav atļautas.
Šis CodePen parāda lodziņa efektu lodziņā, kura transition-durationvērtību izmanto , 1slai pakāpeniski mainītu fona krāsu:
Lai nodrošinātu saderību visās atbalstītajās pārlūkprogrammās, ir nepieciešami piegādātāja prefiksi, un standarta sintakse tiek pasludināta par pēdējo:
.example ( -webkit-transition-duration: 700ms; -moz-transition-duration: 700ms; -o-transition-duration: 700ms; transition-duration: 700ms; )IE10 (pirmā stabilā IE versija, kas atbalsta transition-duration) -ms-prefikss nav nepieciešams .
Pārlūka atbalsts
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Darbi | Darbi | 4+ | 10,5+ | 10+ | 2.1+ | 3.2+ |