MoreLesson 243Preview gratis
Transition on Hover
Lesson ini bagian dari How To · Semua level
Ringkasan
Transisi CSS membuat perubahan gaya saat hover berjalan mulus, bukan melompat tiba-tiba. Kamu menentukan properti yang dianimasikan, durasi, ritme, dan delay pada elemen dasar, lalu mengubah nilainya di selector :hover. Hanya properti yang dapat dianimasikan seperti color, background-color, opacity, dan transform yang akan bertransisi.
Poin kunci
- Tulis transition pada selector dasar, bukan hanya di :hover, agar animasi berjalan dua arah.
- transition-property menentukan properti yang dianimasikan; hindari all jika tidak perlu.
- Durasi 150-300ms terasa responsif untuk perubahan saat hover.
- Hormati prefers-reduced-motion bagi pengguna yang sensitif terhadap gerakan.
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.