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.

Pilih dari pustaka berisi lebih dari empat puluh animasi siap pakai yang dikelompokkan menjadi Pudar, Geser, Zoom, Putar, Pantul, Perhatian, Keluar, dan Pemuat, atau bangun sendiri dari nol. Setiap keyframe bisa mengatur opacity, scale, rotation, translate X dan Y, skew X dan Y, blur, radius sudut, bayangan kotak, dan warna latar. Sudah punya blok @keyframes? Tempel ke dialog impor dan editor visual akan menyusun ulang setiap langkah. Jeda pratinjau lalu geser penanda merah untuk memeriksa frame tengah mana pun; hasilnya CSS @keyframes biasa, langsung siap ditempel ke stylesheet manapun.

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.

Kapan menggunakan

• Menambahkan animasi masuk ke hero section, modal, atau card saat halaman dimuat.
• Mendesain microinteraction tombol, misalnya pembesaran tipis saat hover atau shake ketika formulir error.
• Membuat prototipe spinner loading dan state skeleton sebelum dihubungkan ke framework.

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.

FAQ

Apa beda CSS animation dengan transition?

Transition berpindah dari kondisi A ke B sekali saat ada trigger (hover, focus, perubahan class). Animation mengikuti aturan @keyframes dengan berapa pun langkah perantara, bisa berulang, dan langsung jalan saat halaman dimuat tanpa interaksi pengguna.

Kenapa animasinya jalan sekali lalu hilang?

Elemen kembali ke gaya dasarnya setelah animasi selesai. Set animation-fill-mode ke forwards supaya nilai keyframe terakhir tetap menempel, atau ke both kalau Anda juga butuh keyframe pertama berlaku selama delay.

Easing mana yang terasa paling natural?

Untuk masuk, ease-out melambat di akhir sehingga gerakan terasa mantap. Untuk keluar, ease-in melakukan kebalikannya. cubic-bezier(0.34, 1.56, 0.64, 1) memberi sedikit overshoot — terasa playful tanpa berlebihan.

Apakah animasi ini jalan di browser lama?

@keyframes didukung di setiap browser yang rilis setelah 2013, tanpa prefix vendor. Kalau target Anda IE 10 atau lebih lama, perlu prefix -webkit-, tetapi porsi pengguna itu sudah jauh di bawah ambang yang sepadan dengan CSS tambahan.

Bagaimana membuat animasi berulang selamanya?

Set iteration-count ke infinite, pasangkan dengan direction: alternate, jadi setiap siklus akan berbalik dan Anda mendapat gerakan bolak-balik yang halus (cocok untuk pulse dan shake), bukan lompatan tajam balik ke awal.

Alat terkait