Generator Animasi CSS
Buat animasi CSS (@keyframes) secara intuitif.
Mendukung 12 preset, penyesuaian parameter, dan pratinjau real-time.
Pengaturan Animasi
Output Kode CSS
Tentang Generator Animasi CSS
"Generator Animasi CSS" ini adalah alat gratis yang memungkinkan Anda memeriksa gerakan animasi secara visual menggunakan @keyframes CSS dan secara otomatis menghasilkan kode CSS yang diperlukan. Ini mencakup 12 jenis animasi dasar (preset) seperti fade-in, slide, scale, dan bounce.
Anda dapat secara intuitif menyesuaikan properti seperti Durasi (detik), Jeda, Easing, Iterasi, dan Mode Isi menggunakan penggeser dan kotak pilihan, dan memeriksanya secara real-time di area pratinjau.
Setelah disesuaikan, cukup salin kode CSS yang dihasilkan dan tempelkan langsung ke proyek Anda. Semua pemrosesan dilakukan di dalam browser dan tidak ada komunikasi dengan server eksternal, sehingga Anda dapat menggunakannya dengan aman.
Langkah-langkah Membuat Animasi CSS
Pilih Gerakan Dasar
Pertama, alihkan tab seperti "Memudar" atau "Geser" dan pilih preset yang mendekati animasi yang ingin Anda buat.
Sesuaikan Parameter
Ubah durasi, jeda, dan kecepatan easing dengan slider, dan periksa gerakan sebenarnya di area pratinjau sebelah kanan.
Salin Kode CSS
Setelah gerakan selesai, klik tombol "Salin Kode" di area keluaran (output) dan tempelkan ke file CSS Anda.
Glosarium Animasi CSS (Panduan Properti)
animation-duration(Duration)- Menentukan waktu pemutaran (waktu untuk selesai) untuk satu iterasi animasi. Ditentukan dalam detik (s) atau milidetik (ms).
animation-timing-function(Easing)- Menentukan kurva kecepatan (percepatan/perlambatan) animasi. Contohnya termasuk "linear" untuk kecepatan konstan dan "ease-in-out" untuk awal dan akhir yang bertahap.
animation-delay(Delay)- Menentukan waktu tunggu (jeda) sebelum animasi dimulai.
animation-iteration-count(Iterations)- Menentukan berapa kali animasi berulang. Menentukan "infinite" akan mengulangnya tanpa henti.
animation-direction(Direction)- Menentukan arah pemutaran animasi. Contohnya "reverse" untuk mundur, dan "alternate" di mana pemutaran ganjil maju dan genap mundur.
animation-fill-mode(Fill Mode)- Menentukan bagaimana gaya (status) elemen dipertahankan sebelum dan sesudah animasi berjalan. Menyetelnya ke "forwards" mempertahankan gaya di akhir animasi.
transition-property(Property)- transition を適用するプロパティ名 (例: transform, opacity, all)。
transition-duration(Duration)- transition が完了するまでの時間。
transition-timing-function(Easing)- transition の速度変化のカーブ (Easing)。
Pertanyaan yang Sering Diajukan (FAQ) tentang Animasi CSS
- Q.Apa perbedaan antara animasi CSS dan transisi?
transitionmenginterpolasi antara dua keadaan yang dipicu oleh perubahan (misalnya hover).animationdapat diputar secara otomatis tanpa pemicu dan memungkinkan definisi keadaan perantara yang lebih detail menggunakan @keyframes.- Q.Animasi apa yang berkinerja paling baik?
- Animasi yang menggunakan
transform(translate, scale, rotate) danopacitycepat karena akselerasi perangkat keras. Animasi padawidth,height, ataumarginmenyebabkan reflow browser dan lebih lambat. - Q.Apa itu prefers-reduced-motion?
- Ini adalah kueri media (media query) untuk pengguna yang mengalami mabuk karena animasi. Disarankan untuk menggunakan
@media (prefers-reduced-motion: reduce)untuk menonaktifkan atau menguranginya demi aksesibilitas. - Q.Apakah animation-fill-mode forwards wajib?
- Untuk animasi seperti fade-in, jika Anda tidak menentukan
forwards, elemen akan kembali ke keadaan semula (misalnya, opacity: 0) pada akhirnya. Wajib jika Anda ingin mempertahankan gaya bingkai akhir di layar. - Q.Apakah data saya dikirim ke server?
- Tidak. Semua pemrosesan diselesaikan secara lokal di browser Anda dan tidak ada data yang dikirim ke luar.
Kasus Penggunaan Animasi CSS
Animasi Pemuatan Halaman
Terapkan fade-in di mana konten muncul dengan lembut, atau slide-in dari bawah untuk meningkatkan kesan pertama halaman.
Menyorot Tombol dan CTA
Terapkan animasi seperti pulse (berdenyut) atau bounce (memantul) ke tombol konversi untuk memandu pandangan pengguna secara alami.
Animasi Berbasis Gulir
Gabungkan API Intersection Observer dengan kelas animasi CSS yang dihasilkan untuk membuat efek yang diputar saat elemen masuk ke layar.
UI Pemuatan/Tunggu (Loading)
Terapkan animasi pemuatan yang berputar atau berkedip tanpa henti sebagai umpan balik saat mengambil data atau mengirimkan formulir.
Kirim Umpan Balik
Beri tahu kami pendapat Anda untuk membantu kami menyempurnakan alat ini.
Umpan balik sementara ditangguhkan
Server sedang sibuk atau perlindungan spam aktif. Silakan coba lagi nanti.