The transitionproperti adalah properti singkatan digunakan untuk mewakili sampai empat sifat tulisan tangan terkait transisi-:
.example ( transition: (transition-property) (transition-duration) (transition-timing-function) (transition-delay); )Properti transisi ini memungkinkan elemen untuk mengubah nilai selama durasi yang ditentukan, menganimasikan perubahan properti, daripada membuatnya segera terjadi. Berikut adalah contoh sederhana yang mentransisikan warna latar belakang elemen pada: hover:
div ( transition: background-color 0.5s ease; background-color: red; ) div:hover ( background-color: green; )Div itu akan memakan waktu setengah detik saat mouse di atasnya untuk berubah dari merah menjadi hijau. Berikut adalah demonstrasi langsung dari transisi semacam itu:
Lihat Demo Pen Transition oleh Louis Lazaris (@impressivewebs) di CodePen.
Anda dapat menentukan properti tertentu seperti yang kita miliki di atas, atau menggunakan nilai "semua" untuk merujuk ke properti transisi.
div ( transition: all 0.5s ease; background: red; padding: 10px; ) div:hover ( background: green; padding: 20px; )Dalam contoh di atas, baik latar belakang dan pengisi akan bertransisi, karena nilai "semua" ditentukan untuk transition-propertybagian tulisan cepat.
Anda dapat menggunakan kumpulan nilai terpisah untuk melakukan transisi yang berbeda pada properti yang berbeda:
div ( transition: background 0.2s ease, padding 0.8s linear; )Untuk sebagian besar, urutan nilai tidak menjadi masalah - kecuali jika penundaan ditentukan. Jika Anda menentukan penundaan, Anda harus menentukan durasinya terlebih dahulu. Nilai pertama yang dikenali browser sebagai nilai waktu yang valid akan selalu mewakili durasi. Nilai waktu valid berikutnya akan diuraikan sebagai penundaan.
Beberapa properti tidak dapat dialihkan karena bukan properti yang dapat dianimasikan. Lihat spesifikasi untuk daftar lengkap properti mana yang dapat dianimasikan.
Dengan menentukan transisi pada elemen itu sendiri, Anda menentukan transisi yang akan terjadi di kedua arah. Artinya, ketika gaya diubah (misalnya saat mengarahkan kursor), properti mereka akan bertransisi, dan saat gaya berubah kembali (misalnya saat mengarahkan kursor ke nonaktif) mereka akan bertransisi. Misalnya, transisi demo berikut saat mengarahkan kursor, tetapi tidak saat mengarahkan kursor:
Lihat Pen zohgt oleh Louis Lazaris (@impressivewebs) di CodePen.
Ini terjadi karena transisi telah dipindahkan ke :hoverpemilih status dan tidak ada transisi yang cocok pada pemilih yang menargetkan elemen secara langsung tanpa :hoverstatus.
Untuk kompatibilitas di semua browser pendukung, prefiks vendor diperlukan, dengan sintaks standar yang dideklarasikan terakhir:
.example ( -webkit-transition: background-color 500ms ease-out 1s; -moz-transition: background-color 500ms ease-out 1s; -o-transition: background-color 500ms ease-out 1s; transition: background-color 500ms ease-out 1s; )IE10 (versi stabil IE pertama yang mendukung transition) tidak memerlukan -ms-awalan.
Dukungan Browser
Data dukungan browser ini berasal dari Caniuse, yang lebih detail. Angka menunjukkan bahwa browser mendukung fitur pada versi tersebut dan yang lebih baru.
Desktop
| Chrome | Firefox | YAITU | Tepi | Safari |
|---|---|---|---|---|
| 4 * | 5 * | 10 | 12 | 5.1 * |
Ponsel / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 2.1 * | 6.0-6.1 * |