Oke, kita lanjut ke materi "bonus" yang bisa bikin tampilan website jadi lebih halus dan interaktif tanpa perlu JavaScript yang rumit.
Bikin Perubahan Jadi Smooth: Kenalan Sama Transisi CSS!
Pernah liat tombol yang warnanya berubah alus pas di-hover mouse? Atau kotak yang ukurannya ngegedein pelan-pelan? Efek-efek "smooth" kayak gitu seringkali dibuat pake Transisi CSS (CSS Transitions).
Transisi CSS ngebolehin kamu buat ngatur gimana perubahan nilai sebuah properti CSS itu terjadi: apakah langsung jeglek berubah, atau berubah secara bertahap (transisi) dalam rentang waktu tertentu. Ini bisa bikin interaksi pengguna jadi kerasa lebih alami dan enak diliat.
Gimana Cara Kerja Transisi CSS?
Intinya, kamu ngasih tau browser: "Hei, kalau properti X di elemen ini nilainya berubah (misalnya karena di-hover atau diubah sama JavaScript), jangan langsung diganti ya, tapi ubah pelan-pelan selama sekian detik dengan gaya animasi tertentu."
Ada beberapa properti utama yang dipake buat ngatur transisi:
-
transition-property:- Nentuin properti CSS mana aja yang mau dikasih efek transisi.
- Nilainya bisa:
