The transition-durationharta, biasanya digunakan sebagai sebahagian daripada transitiontrengkas, digunakan untuk menentukan tempoh peralihan yang ditetapkan. Iaitu, jangka masa yang diperlukan untuk elemen yang disasarkan untuk beralih antara dua keadaan yang ditentukan.
.example ( transition-duration: 3s; )Nilainya boleh menjadi salah satu daripada yang berikut:
- Nilai masa yang sah (ditentukan dalam beberapa saat atau milisaat)
- Senarai nilai masa yang dipisahkan dengan koma, untuk menukar beberapa sifat pada satu elemen
Nilai lalai transition-durationadalah 0s, bermaksud bahawa tidak ada peralihan yang akan berlaku dan perubahan harta tanah akan berlaku dengan segera, walaupun sifat-sifat yang berkaitan dengan peralihan ditentukan. Nilai masa boleh dinyatakan sebagai nombor berdasarkan perpuluhan untuk masa yang lebih tepat dan nilai negatif tidak dibenarkan.
CodePen berikut menunjukkan kesan hover pada kotak yang menggunakan transition-durationnilai 1suntuk mengubah warna latar belakang secara beransur-ansur:
Untuk keserasian dalam semua penyemak imbas yang menyokong, awalan vendor diperlukan, dengan sintaks standard yang dinyatakan terakhir:
.example ( -webkit-transition-duration: 700ms; -moz-transition-duration: 700ms; -o-transition-duration: 700ms; transition-duration: 700ms; )IE10 (versi stabil pertama IE yang disokong transition-duration) tidak memerlukan -ms-awalan.
Sokongan Penyemak Imbas
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Berfungsi | Berfungsi | 4+ | 10.5+ | 10+ | 2.1+ | 3.2+ |