Penghasil Animasi CSS
CSS Animation Generator membuat animasi @keyframes dari 14 preset seperti fade in, slide in, bounce in, pulse, spin, shake, dan zoom, dengan pengaturan durasi, timing function, dan jumlah perulangan.
Tentang alat ini
CSS Animation Generator membuat animasi @keyframes dari 14 preset seperti fade in, slide in, bounce in, pulse, spin, shake, dan zoom, dengan pengaturan durasi, timing function, dan jumlah perulangan.
Cara menggunakan
- Pilih preset animasi.
- Atur durasi, timing function, dan jumlah perulangan.
- Tekan Replay untuk melihat pratinjau.
- Klik Copy CSS untuk mendapatkan @keyframes dan aturan animation.
Perlu diketahui
- Animasi CSS terdiri dari dua bagian: aturan @keyframes dan properti animation pada elemen.
- Menganimasikan transform dan opacity biasanya pilihan paling mulus untuk performa.
- Timing function seperti ease-out bergerak cepat lalu melambat, sehingga terasa alami untuk efek masuk.
- Hormati media query prefers-reduced-motion bagi pengguna yang meminta gerakan lebih sedikit.
- Jumlah perulangan infinite cocok untuk loader; efek masuk biasanya hanya berjalan sekali.
Berjalan sepenuhnya di browser Anda — apa pun yang Anda masukkan tidak diunggah atau disimpan.
Pertanyaan umum
Bagaimana cara membuat animasi CSS?
Definisikan gerakannya dalam aturan @keyframes, lalu pasang dengan animation: name duration timing iteration. Generator ini menuliskan keduanya untuk Anda.
Apa bedanya CSS transition dan animation?
Transition menganimasikan perubahan antara dua keadaan saat sebuah properti berubah, misalnya saat hover. Animation memakai keyframes, bisa berjalan otomatis, dan bisa berulang.
Bagaimana membuat animasi berulang tanpa henti?
Atur jumlah perulangan ke infinite, misalnya animation: spin 1s linear infinite.
Apakah animasi CSS memengaruhi aksesibilitas?
Gerakan yang besar atau terus-menerus bisa mengganggu sebagian pengguna. Bungkus animasi yang tidak esensial dalam @media (prefers-reduced-motion: no-preference).