CSS transition dikendalikan menggunakan singkatan transition property. Ini adalah cara terbaik untuk mengkonfigurasi transition, karena akan membuat lebih mudah untuk menghindari daftar parameter sinkron yang panjang, yang dapat menghabiskan banyak waktu debugging CSS.
Kita dapat mengontrol komponen individual dari transisi dengan sifat sub sebagai berikut:
(Perhatikan bahwa transisi loop ini tak terhingga hanya untuk contoh ; CSS transisi hanya membayangkan perubahan properti dari awal sampai akhir. Jika kita perlu visualisasi bahwa loop, lihatlah contoh pada CSS animation properti.)
transition-property
Menentukan nama atau nama-nama properti CSS yang transisi harus diterapkan. Hanya sifat-sifat yang tercantum di sini animasi selama transisi; perubahan semua sifat-sifat lainnya terjadi seketika seperti biasa.
transition-duration
Menentukan durasi yang transisi harus terjadi. Kita dapat menentukan durasi tunggal yang berlaku untuk semua properti selama transisi, atau beberapa nilai untuk memungkinkan setiap properti untuk transisi selama periode waktu yang berbeda.
Contoh :
- transition-duration: 0.5s
- transition-duration: 1s
- transition-duration: 2s
- transition-duration: 4s
transition-timing-function
Menentukan fungsi untuk mendefinisikan nilai-nilai bagaimana nilai menengah untuk properti dihitung. Timing Functions menentukan bagaimana nilai menengah transisi dihitung. Fungsi waktu yang paling dapat ditentukan dengan menyediakan grafik fungsi yang sesuai, seperti yang didefinisikan oleh empat poin yang mendefinisikan bezier kubik. Kita juga dapat memilih mengurangi dari mengurangi fungsi Cheat Sheet.
Contoh :
- transition-timing-function: ease
- transition-timing-function: linear
- transition-timing-function: step-end
- transition-timing-function: steps(4, end)
transition-delay
Mendefinisikan berapa lama menunggu antara waktu properti berubah dan transisi yang sebenarnya baru dimulai.
Contoh :
- transition-delay: 0.5s
- transition-delay: 1s
- transition-delay: 2s
- transition-delay: 4s
Untuk menulis sintaks CSS yang singkat bisa ditulis sebagai berikut :
div {
transition: <property> <duration> <timing-function> <delay>;
}
0 komentar :
Post a Comment