The transition-propertyproperti, biasanya digunakan sebagai bagian dari transitionsingkatan, digunakan untuk mendefinisikan apa properti, atau properti, Anda ingin menerapkan efek transisi.
Ini dilakukan dengan memberikan nama properti sebagai nilai:
.example ( transition-property: color; )Nilainya dapat berupa salah satu dari berikut ini:
- Satu nama properti, seperti pada contoh di atas
- Daftar nama properti yang dipisahkan koma (singkat atau panjang), untuk mentransisikan beberapa properti pada satu elemen
- Kata kunci
none, yang menunjukkan bahwa tidak ada properti yang akan ditransisikan - Kata kunci
all, yang menunjukkan bahwa semua properti akan bertransisi (default)
Ketika koma memisahkan nilai-nilai, nama-nama properti dasarnya dipetakan ke sifat transisi lainnya didefinisikan ( transition-timing-function, transition-duration, dan transition-delay). Artinya, jika daftar properti yang dipisahkan koma menyertakan satu atau beberapa nama properti yang tidak valid, properti lainnya masih akan bertransisi, dan akan memetakan ke properti transisi terkait yang diinginkan.
Spesifikasi menjelaskan ini dengan mengatakan:
"(U) properti yang tidak dikenal atau tidak dapat dianimasikan harus disimpan dalam daftar untuk mempertahankan pencocokan indeks."
Saat menggunakan nilai noneatau kata kunci universal inheritatau initial, nilai ini tidak dapat digunakan sebagai bagian dari daftar yang dipisahkan koma, jika tidak, ini akan mengakibatkan kesalahan sintaks dan seluruh baris akan diabaikan.
Untuk kompatibilitas di semua browser pendukung, prefiks vendor diperlukan, dengan sintaks standar yang dideklarasikan terakhir:
.example ( -webkit-transition-property: color; -moz-transition-property: color; -o-transition-property: color; transition-property: color; )IE10 (versi stabil IE pertama yang mendukung transition-property) tidak memerlukan -ms-awalan.
Dukungan Browser
| Chrome | Safari | Firefox | Opera | YAITU | Android | iOS |
|---|---|---|---|---|---|---|
| Bekerja | Bekerja | 4+ | 10.5+ | 10+ | 2.1+ | 3.2+ |