Apa itu Generator Animasi CSS?

Buat animasi CSS keyframe secara visual — tanpa perlu menulis kode manual. Atur keyframe, pilih fungsi timing, sesuaikan durasi dan delay, lalu salin kode CSS langsung ke proyek Anda. Cocok 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