The transition-durationproperti, biasanya digunakan sebagai bagian dari transitionsingkatan, digunakan untuk menentukan durasi transisi ditentukan. Artinya, lamanya waktu yang dibutuhkan elemen yang ditargetkan untuk bertransisi antara dua status yang ditentukan.
.example ( transition-duration: 3s; )Nilainya dapat berupa salah satu dari berikut ini:
- Nilai waktu yang valid (ditentukan dalam detik atau milidetik)
- Daftar nilai waktu yang dipisahkan koma, untuk mentransisikan beberapa properti pada satu elemen
Nilai default untuk transition-durationis 0s, artinya tidak ada transisi yang akan terjadi dan perubahan properti akan segera dilakukan, meskipun properti terkait transisi lainnya telah ditentukan. Nilai waktu dapat dinyatakan sebagai angka berbasis desimal untuk pengaturan waktu yang lebih tepat dan nilai negatif tidak diperbolehkan.
CodePen berikut memperlihatkan efek hover pada kotak yang menggunakan transition-durationnilai 1suntuk mengubah warna latar belakang secara bertahap:
Untuk kompatibilitas di semua browser pendukung, prefiks vendor diperlukan, dengan sintaks standar yang dideklarasikan terakhir:
.example ( -webkit-transition-duration: 700ms; -moz-transition-duration: 700ms; -o-transition-duration: 700ms; transition-duration: 700ms; )IE10 (versi stabil IE pertama yang mendukung transition-duration) tidak memerlukan -ms-awalan.
Dukungan Browser
| Chrome | Safari | Firefox | Opera | YAITU | Android | iOS |
|---|---|---|---|---|---|---|
| Bekerja | Bekerja | 4+ | 10.5+ | 10+ | 2.1+ | 3.2+ |