Cara menggunakan Generator Animasi Hover CSS
- Pilih preset hover seperti Grow, Lift, Tilt, atau Buzz.
- Ganti pratinjau antara tombol, kartu, ikon, dan teks, lalu arahkan kursor untuk mengujinya.
- Atur durasi, easing, dan keyframes sampai terasa pas.
- Salin CSS-nya. Efeknya juga berlaku di
:focus-visibleuntuk pengguna keyboard.
Animasi hover vs transition
Untuk perubahan sederhana dari A ke B, transition sudah cukup dan akan kembali dengan halus saat kursor meninggalkan elemen. Animasi keyframes pada :hover lebih cocok jika efeknya punya beberapa tahap (misalnya memantul, bergetar, atau goyang) atau perlu diulang selama elemen di-hover. Generator ini menghasilkan selector :hover dan :focus-visible sekaligus, jadi pengguna keyboard juga mendapat umpan balik yang sama. Usahakan efeknya tidak berlebihan, sekitar 150–300 ms sudah terasa responsif.
Yang bisa kamu buat
- Timeline keyframe — tambahkan keyframe sebanyak yang kamu mau, seret ke persentase baru, dan beri easing sendiri untuk tiap keyframe.
- Properti — translate X/Y, rotate, rotate 3D X/Y, scale, skew, opacity, blur, glow (box-shadow), warna latar, dan border radius. Nilai yang kosong diinterpolasi, jadi transform tidak pernah melompat.
- Pemicu — saat halaman dimuat, saat di-hover, saat diklik, saat masuk layar ketika di-scroll, atau animasi scroll-driven yang hanya memakai CSS.
- Stagger — animasikan daftar item satu per satu dengan satu custom property CSS.
- Inspeksi — jeda, geser frame demi frame, perlambat ke ¼ kecepatan, dan aktifkan onion skin untuk melihat semua keyframe sekaligus.
- Ekspor — shorthand atau longhand CSS, HTML, JavaScript, Tailwind v3 dan v4, mixin SCSS, file demo mandiri, atau tautan berbagi.
Shorthand animation
| Bagian | Contoh | Arti |
|---|---|---|
| nama | fade-in-up | Aturan @keyframes yang akan dijalankan |
| durasi | 0.6s | Lama satu siklus |
| fungsi timing | cubic-bezier(.33,1,.68,1) | Kurva kecepatan di antara keyframe |
| delay | 0.2s | Waktu tunggu sebelum mulai; nilai negatif memulai dari tengah animasi |
| jumlah iterasi | infinite | Berapa kali siklus diulang |
| arah | alternate | Diputar mundur pada setiap siklus genap |
| mode fill | both | Mempertahankan frame pertama sebelum dan frame terakhir sesudah animasi |
Aksesibilitas
Sebagian orang bisa pusing atau mual karena gerakan. Jika opsi Hormati prefers-reduced-motion diaktifkan, CSS akan mematikan animasi untuk pengunjung yang sudah mengaktifkan “kurangi gerakan” di sistem operasinya. Hindari kedipan lebih dari tiga kali per detik, dan buat animasi yang berulang tetap halus atau sediakan cara bagi pengguna untuk menjedanya.
Tips performa
Animasikan transform dan opacity, bukan top, left, width, atau margin, karena properti tersebut memicu layout ulang di setiap frame. Tambahkan will-change hanya pada elemen yang akan segera dianimasikan. Atur kurva easing dengan generator cubic-bezier, tambahkan spinner dari generator CSS loader, dan padukan animasi dengan box shadow atau gradient.
Juga dicari sebagai: efek hover css, animasi hover css, efek hover tombol css, generator hover css, efek hover kartu css, hover effects css, animasi tombol css.
Tool yang cocok dipakai bersama Generator Animasi Hover CSS
- Generator Animasi CSS — Desain animasi CSS di atas timeline keyframe sungguhan.
- Generator CSS Keyframes — Editor visual untuk @keyframes.
- Generator Glassmorphism — Desain kartu kaca buram dengan slider langsung dan salin CSS lintas browser, lengkap dengan prefix -webkit-backdrop-filter dan fallback untuk browser lama.
- Kalkulator clamp() — Masukkan ukuran minimum dan maksimum serta rentang viewport, lalu dapatkan nilai clamp() yang ramah zoom dengan penjelasan perhitungannya, pratinjau langsung, dan skala tipografi atau spasi fluid yang lengkap.
Pertanyaan yang sering diajukan
Apakah CSS yang dihasilkan gratis digunakan?
Bisakah saya mengedit animasi yang sudah saya punya?
Bagaimana cara memulai animasi saat elemen masuk layar ketika di-scroll?
animation-timeline: view() tanpa JavaScript di browser yang mendukungnya.Apakah ini bisa dipakai dengan Tailwind CSS?
tailwind.config.js untuk v3 dan blok @theme untuk v4, sehingga animasinya bisa dipakai sebagai kelas animate-*.Properti mana yang paling baik untuk animasi yang halus?
transform dan opacity berjalan di compositor GPU sehingga tetap halus meski di ponsel yang lambat. Blur, shadow, warna, dan border radius lebih berat, jadi gunakan secukupnya pada elemen besar.