Generator CSS Animation
Buat animasi CSS @keyframes dari preset atau keyframe Anda sendiri, atur durasi, jeda, perulangan, arah, fill mode, dan kurva cubic-bezier.
Preset
Keyframe
Satu aturan per baris, mis. 50% { transform: scale(1.2); }. Silakan ubah; pratinjau langsung diperbarui.
Waktu
Pratinjau
@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-30px); }
60% { transform: translateY(-15px); }
}
.animated {
animation: bounce 1s ease 0s infinite normal both;
}
@media (prefers-reduced-motion: reduce) {
.animated {
animation: none;
}
}Alat Terkait
Lihat SemuaApa itu Generator CSS Animation?
Membuat animasi CSS lengkap: aturan @keyframes, shorthand animation, dan override prefers-reduced-motion opsional. Mulai dari preset seperti fade, slide, bounce, pulse, shake, spin, atau heartbeat, edit keyframe sesuka hati, dan bentuk timing-nya dengan kurva cubic-bezier yang bisa diseret.
Cara menggunakan Generator CSS Animation
- Pilih preset atau ketik Keyframe Anda sendiri (satu aturan per baris).
- Atur Nama animasi, Durasi, dan Jeda.
- Pilih Arah, Mode isi, dan Ulangi terus atau Jumlah perulangan.
- Pilih Fungsi waktu atau seret pegangan cubic-bezier / ketik X1, Y1, X2, Y2.
- Tekan Putar ulang untuk melihatnya lagi, lalu salin kode CSS-nya.
Contoh
Pulse preset, iterations 3, direction alternate, delay 0.5s, cubic-bezier(0.68, -0.6, 0.32, 1.6), reduced-motion off
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
.animated {
animation: pulse 1s cubic-bezier(0.68, -0.6, 0.32, 1.6) 0.5s 3 alternate both;
} Kapan menggunakan Generator CSS Animation
Gunakan untuk efek kemunculan, loader, penarik perhatian, dan mikro-interaksi. Untuk perubahan status sederhana (warna atau ukuran saat hover), CSS transition sudah cukup. Biarkan opsi reduced-motion aktif agar pengguna yang meminta gerakan lebih sedikit di sistem operasinya tidak terganggu oleh gerakan besar.
Cara kerja Generator CSS Animation
Teks keyframe dibungkus dalam @keyframes name { … } dan pengaturannya ditulis dalam urutan shorthand standar name duration timing-function delay iteration-count direction fill-mode. Editor bezier membatasi nilai X ke 0–1 (sesuai ketentuan CSS), sedangkan Y boleh melampaui batas untuk easing mirip pantulan; jika keempat nilai sama dengan kata kunci CSS (ease, linear, ease-in, ease-out, ease-in-out), kata kuncinya yang ditulis. Nama disanitasi menjadi identifier CSS yang valid. Pratinjau memakai nama keyframes privat sehingga tidak pernah bentrok dengan animasi halaman itu sendiri.
Kasus Penggunaan Umum
- Animasi kemunculan fade atau slide-in
- Spinner tanpa henti dan loader berdenyut
- Umpan balik bergetar pada input formulir yang tidak valid
- Indikator gulir ke bawah yang memantul
- Easing kustom untuk gerakan khas merek
Pertanyaan Umum
Apa fungsi fill mode?
forwards mempertahankan keyframe terakhir setelah animasi selesai, backwards menerapkan keyframe pertama selama jeda, both melakukan keduanya, dan none tidak melakukan keduanya.
Mengapa nilai X pada bezier dibatasi 0–1?
X mewakili waktu, yang tidak bisa mundur, sehingga CSS menolak nilai di luar 0–1. Y mewakili progres dan boleh melampaui batas untuk menciptakan efek antisipasi atau pantulan.
Apa yang ditambahkan oleh opsi reduced-motion?
Blok @media (prefers-reduced-motion: reduce) yang mengatur animation: none untuk pengguna yang mengaktifkan pengurangan gerakan di sistem operasinya.