Generator Animasi CSS dengan Preset dan Editor Visual
Generator Animasi CSS memungkinkan Anda membuat animasi @keyframes secara visual, tanpa menulisnya manual. Pilih preset siap pakai, sesuaikan timing dan easing, lalu salin CSS yang rapi dan siap pakai langsung ke stylesheet Anda.
Alat ini dibuat untuk developer frontend dan desainer UI yang ingin gerakan halus secara cepat: membuat prototipe efek masuk, bereksperimen dengan kurva easing, atau menyetel spinner berulang. Anda bisa memilih dari 35 preset dalam empat kategori, mengatur setiap properti animasi, dan membuka Editor Keyframe untuk membentuk tiap langkah sendiri. Pratinjau langsung memutar ulang animasi Anda saat bekerja.
Cara Membuat Animasi CSS
Pilih preset
Pilih tab kategori — Masuk, Keluar, Penekanan, atau Loop — lalu klik preset mana pun untuk menerapkannya. Pratinjau langsung diputar dan setiap properti serta keyframe ikut menyesuaikan.
Sesuaikan propertinya
Setel Durasi (0,1d sampai 5d), Tunda (0d sampai 5d), Easing, Iterasi (1, 2, 3, atau infinite), Arah (normal, reverse, alternate), dan Fill Mode (none, forwards, backwards, both).
Edit keyframe (opsional)
Buka Editor Keyframe untuk membentuk tiap langkah. Atur opacity, translateX, translateY, rotate, dan scale di setiap persen, lalu klik Tambah Keyframe untuk menyisipkan langkah baru dengan nilai interpolasi.
Pratinjau dan salin
Gunakan putar, jeda, dan mulai ulang untuk meninjau gerakan, lalu ganti bentuk pratinjau (kotak, lingkaran, teks) dan warna latar untuk mengujinya sesuai konteks. Saat sudah pas, klik Salin untuk mengambil seluruh CSS-nya.
Fitur
35 Preset Animasi
Pustaka berisi 35 preset dalam empat kategori: Masuk, Keluar, Penekanan, dan Loop, masing-masing dengan timing default yang masuk akal.
Kontrol Properti Lengkap
Atur durasi, tunda, easing, jumlah iterasi, arah, dan fill mode dari satu panel kontrol visual.
9 Opsi Easing
Gunakan kurva standar plus easing bounce, elastic, smooth, dan steps khusus untuk efek frame demi frame.
Editor Keyframe Visual
Timeline menampilkan setiap keyframe; klik langkah mana pun untuk mengedit opacity, translateX/Y, rotate, dan scale, lalu tambah atau hapus langkah.
Interpolasi Cerdas
Keyframe baru diisi otomatis dari langkah di sekitarnya, sehingga frame yang disisipkan tetap halus tanpa lompatan.
Pratinjau Langsung
Saksikan animasi diputar ulang secara real time dengan kontrol putar, jeda, dan mulai ulang setiap kali Anda mengubah pengaturan.
Opsi Bentuk dan Latar
Pratinjau pada elemen kotak, lingkaran, atau teks dan atur warna latar khusus untuk menguji gerakan dalam konteks berbeda.
Output Kode Rapi
Dapatkan blok @keyframes lengkap plus shorthand animation, diperbarui langsung, dengan salin sekali klik ke clipboard Anda.
Mode Gelap
Tema gelap bawaan membuat editor nyaman digunakan dalam kondisi minim cahaya.
Berjalan di Peramban Anda
Semua pemrosesan berlangsung di sisi peramban, jadi animasi Anda tetap di perangkat tanpa data yang dikirim ke server.
Pertanyaan yang Sering Diajukan
Bagaimana cara membuat animasi CSS?
Pilih preset dari sebuah kategori, sesuaikan durasi, easing, dan properti lainnya, lalu buka Editor Keyframe secara opsional untuk menyempurnakan tiap langkah. Saat pratinjau langsung sudah pas, klik Salin untuk mendapatkan seluruh CSS-nya. Tidak ada yang perlu dipasang atau didaftarkan.
Apa itu keyframe CSS dan @keyframes?
Aturan @keyframes mendefinisikan tahapan bernama dari sebuah animasi, dengan tiap keyframe ditetapkan pada persentase dari 0% sampai 100%. Peramban melakukan interpolasi di antara tahapan itu sepanjang durasi animasi. Generator ini membuatkan aturan @keyframes untuk Anda dan menerapkannya melalui shorthand animation.
Properti CSS apa saja yang bisa dianimasikan?
Editor Keyframe mengontrol opacity, translateX, translateY, rotate, dan scale — properti yang dipercepat GPU di sebagian besar peramban untuk gerakan yang halus. Beberapa preset juga memakai transform yang lebih kaya seperti scaleX, scaleY, skewX, skewY, dan rotateX, yang ikut masuk ke kode yang dihasilkan.
Apa fungsi fill mode?
Fill mode mengatur tampilan elemen sebelum dan sesudah animasi. none mengembalikannya ke gaya awal, forwards mempertahankan gaya keyframe terakhir, backwards menerapkan keyframe pertama selama jeda tunda, dan both menggabungkan keduanya. Untuk animasi masuk, forwards biasanya menjaga elemen tetap terlihat setelah memudar masuk.
Fungsi easing mana yang sebaiknya saya pakai?
Gunakan ease-out untuk efek masuk (mulai cepat, berhenti lembut), ease-in untuk efek keluar (mulai lembut, selesai cepat), dan ease-in-out untuk penekanan dan loop. Pilih linear untuk spinner berputar terus-menerus, dan andalkan bounce atau elastic saat menginginkan kesan playful yang menarik perhatian.
Bagaimana cara membuat animasi berulang (infinite)?
Atur Iterasi ke infinite. Preset Loop — seperti Spin, Float, dan Wave — sudah memakai iterasi infinite, jadi keduanya terus berputar sendiri. Memadukan infinite dengan arah alternate menciptakan gerakan bolak-balik yang halus.
Apa beda animasi CSS dan transition?
Sebuah transition menganimasikan satu perubahan di antara dua keadaan dan butuh pemicu seperti hover atau perubahan class. Animasi keyframe bisa mendefinisikan banyak tahapan perantara, bisa berulang, dan mulai sendiri. Alat ini berfokus pada animasi @keyframes, yang memberi Anda kontrol lebih halus atas gerakan multi-langkah.
Bagaimana cara menyalin CSS yang dihasilkan?
Klik tombol Salin pada panel kode. Tombol itu menyalin seluruh output — blok @keyframes plus aturan .element dengan shorthand animation — ke clipboard Anda, siap ditempel ke stylesheet. Output memakai properti standar yang didukung di semua peramban modern, tanpa perlu vendor prefix.
Belum ada komentar. Jadilah yang pertama berkomentar!