Cara menggunakan Generator Animasi CSS
- Pilih preset dengan mengarahkan kursor ke kotaknya untuk pratinjau, atau mulai dari keyframe kosong.
- Atur durasi, delay, iterasi, easing, dan pemicu (load, hover, klik, scroll).
- Edit keyframe di timeline: klik untuk menambah, seret untuk memindahkan, lalu sesuaikan propertinya dengan slider.
- Geser, perlambat, atau aktifkan onion skin untuk menyempurnakan, lalu salin CSS, Tailwind, atau HTML.
Yang bisa kamu buat
- Timeline keyframe — tambahkan keyframe sebanyak yang kamu mau, seret ke persentase baru, dan beri easing sendiri di setiap keyframe.
- Properti — translate X/Y, rotate, rotate 3D X/Y, scale, skew, opacity, blur, glow (box-shadow), warna background, dan border radius. Nilai yang belum diisi akan diinterpolasi, jadi transform tidak pernah melompat.
- Pemicu — saat halaman dimuat, saat hover, saat diklik, saat masuk ke area pandang, atau animasi berbasis scroll yang hanya memakai CSS.
- Stagger — animasikan daftar item satu per satu dengan satu custom property CSS.
- Inspeksi — jeda, geser frame demi frame, perlambat hingga ¼ 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 link bagikan.
Shorthand animation
| Bagian | Contoh | Arti |
|---|---|---|
| name | fade-in-up | Aturan @keyframes yang dijalankan |
| duration | 0.6s | Panjang satu siklus |
| timing function | cubic-bezier(.33,1,.68,1) | Kurva kecepatan di antara keyframe |
| delay | 0.2s | Jeda sebelum mulai; nilai negatif mulai di tengah jalan |
| iteration count | infinite | Berapa kali siklus diulang |
| direction | alternate | Diputar mundur pada setiap siklus selang-seling |
| fill mode | both | Mempertahankan frame pertama sebelum dan frame terakhir sesudah animasi |
Aksesibilitas
Sebagian orang bisa pusing atau mual karena gerakan. Dengan Hormati prefers-reduced-motion aktif, CSS akan mematikan animasi bagi pengunjung yang sudah mengaktifkan “kurangi gerakan” di sistem operasinya. Hindari kedipan lebih dari tiga kali per detik, dan buat animasi berulang tetap halus atau sediakan cara bagi pengguna untuk menjedanya.
Tips performa
Animasikan transform dan opacity alih-alih top, left, width, atau margin, yang memaksa 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 loader CSS, dan padukan animasi dengan box shadow atau gradien.
Juga dicari sebagai: animasi css, keyframe animation, pembuat animasi css, animate css, animasi css online, generator kode animasi, efek css.
Tool yang cocok dipakai bersama Generator Animasi CSS
- Generator CSS Keyframes — Editor visual untuk @keyframes.
- Generator Animasi Hover CSS — Rancang animasi hover untuk tombol, kartu, tautan, dan ikon.
- 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.
- Konverter PX ke REM — Konversi antara pixel, rem, dan em dengan ukuran font root kamu sendiri, atau tempel seluruh stylesheet dan ubah semua nilai px sekaligus.
Pertanyaan yang sering diajukan
Apakah CSS yang dihasilkan boleh dipakai gratis?
Ya. Setiap preset ditulis khusus untuk tool ini dan hasilnya berupa CSS biasa tanpa library, lisensi, maupun keharusan mencantumkan atribusi.
Bisakah saya mengedit animasi yang sudah saya punya?
Bisa. Buka Impor @keyframes yang sudah ada, tempel CSS kamu, dan akan diubah menjadi keyframe yang bisa diedit. Opacity, transform (translate, rotate, rotateX/Y, scale, skew), blur, warna background, border radius, dan shadow glow didukung.
Bagaimana cara memulai animasi saat elemen masuk ke area pandang?
Pilih pemicu Saat terlihat saat di-scroll untuk skrip IntersectionObserver kecil yang berjalan di mana saja, atau Berbasis scroll (hanya CSS) untuk
animation-timeline: view() tanpa JavaScript di browser yang mendukungnya.Apakah bisa dipakai dengan Tailwind CSS?
Bisa. Tab Tailwind memberikan blok
tailwind.config.js untuk v3 dan blok @theme untuk v4, sehingga animasinya bisa dipakai sebagai class animate-*.Properti apa yang paling baik untuk animasi yang halus?
transform dan opacity berjalan di compositor GPU dan tetap halus meski di ponsel yang lambat. Blur, shadow, warna, dan border radius lebih berat, jadi gunakan dengan hemat pada elemen yang besar.Bisakah saya memasang Generator Animasi CSS sebagai aplikasi web dan memakainya offline?
Bisa. Generator Animasi CSS adalah aplikasi web (PWA) yang bisa dipasang. Pemasangannya lewat browser kamu, bukan diunduh dari toko aplikasi. Klik Pasang aplikasi di bagian atas halaman ini di Chrome atau Edge (Windows, macOS, Linux, ChromeOS) atau di Android. Di iPhone dan iPad, gunakan Bagikan → Tambahkan ke Layar Utama, dan di Safari 17+ pada Mac, gunakan File → Tambahkan ke Dock. Setelah itu, aplikasi akan terbuka di jendelanya sendiri dengan ikonnya sendiri. Karena berjalan sepenuhnya di browser kamu, aplikasi ini tetap bisa dipakai offline. Firefox di desktop tidak bisa memasang aplikasi web. Cara memasang aplikasi.