Apa itu Generator Animasi CSS?

Pembuat animasi CSS visual ini memungkinkan Anda membuat animasi keyframe yang kompleks tanpa menulis kode secara manual. Tentukan keyframe, sesuaikan fungsi timing, atur durasi dan delay — lalu salin kode CSS yang dihasilkan langsung ke proyek Anda. Sempurna untuk tombol, loader, efek hover, dan transisi halaman.

Cara menggunakan

1. Pilih preset animasi (fade, slide, bounce, rotate) atau mulai dari awal dengan menambahkan keyframe pada timeline.
2. Sesuaikan properti di setiap keyframe — transform, opacity, warna, skala — dan atur detail easing curve, durasi, serta jumlah iterasi.
3. Pratinjau animasi secara real-time, lalu salin kode CSS @keyframes yang dihasilkan atau unduh sebagai file .css.

Hasil

Seorang developer frontend membutuhkan animasi masuk yang halus untuk kartu-kartu di halaman portofolio. Mereka menyiapkan animasi ease-out 0,6 detik yang fade in dari 20px di bawah, menyalin CSS-nya, dan menerapkannya dengan delay bertahap per kartu.

Alat terkait