Cara menggunakan Generator CSS Keyframes
- Pilih preset — arahkan kursor ke kotak untuk melihat pratinjaunya — atau mulai dari keyframe kosong.
- Atur durasi, delay, iterasi, easing, dan pemicu (load, hover, click, scroll).
- Edit keyframe di timeline: klik untuk menambah, seret untuk memindahkan, lalu atur propertinya dengan slider.
- Geser timeline, perlambat, atau aktifkan onion skin untuk penyesuaian halus, lalu salin CSS, Tailwind, atau HTML-nya.
Cara kerja @keyframes
Aturan @keyframes berisi daftar gaya yang harus dimiliki elemen pada titik-titik tertentu dalam animasi, ditulis dalam persen (from berarti 0%, to berarti 100%). Browser akan menginterpolasi semua nilai di antaranya. Keyframe dengan gaya yang sama bisa memakai selector yang sama, misalnya 0%, 100% { … }, dan setiap keyframe bisa mengatur animation-timing-function sendiri untuk segmen setelahnya.
Apa saja yang bisa kamu buat
- Timeline keyframe — tambahkan keyframe sebanyak yang kamu mau, geser ke persentase baru, dan beri easing sendiri untuk setiap keyframe.
- Properti — translate X/Y, rotate, rotate 3D X/Y, scale, skew, opacity, blur, glow (box-shadow), warna latar, dan border radius. Nilai yang tidak diisi akan diinterpolasi, jadi transform tidak akan loncat.
- Pemicu — saat halaman dimuat, saat hover, saat diklik, saat masuk ke area layar, atau animasi berbasis scroll yang hanya memakai CSS.
- Stagger — animasikan daftar item satu per satu dengan satu CSS custom property.
- Inspeksi — jeda, geser frame demi frame, perlambat hingga ¼ kecepatan, dan aktifkan onion skin untuk melihat semua keyframe sekaligus.
- Ekspor — shorthand atau longhand CSS, HTML, JavaScript, Tailwind v3 dan v4, mixin SCSS, file demo mandiri, atau tautan berbagi.
Shorthand animation
| Bagian | Contoh | Arti |
|---|---|---|
| nama | fade-in-up | Aturan @keyframes yang akan dijalankan |
| durasi | 0.6s | Panjang satu siklus |
| fungsi timing | cubic-bezier(.33,1,.68,1) | Kurva kecepatan di antara keyframe |
| delay | 0.2s | Jeda sebelum mulai; nilai negatif memulai di tengah animasi |
| jumlah iterasi | infinite | Berapa kali siklus diulang |
| arah | alternate | Diputar mundur di setiap siklus kedua |
| mode fill | both | Mempertahankan frame pertama sebelum dan frame terakhir setelah animasi |
Aksesibilitas
Sebagian orang bisa pusing atau mual karena gerakan. Dengan Respect prefers-reduced-motion aktif, CSS akan mematikan animasi untuk pengunjung yang sudah mengaktifkan “kurangi gerakan” di sistem operasinya. Hindari kedipan lebih dari tiga kali per detik, dan buat animasi berulang tetap halus atau sediakan cara bagi pengguna untuk menjedanya.
Tips performa
Animasikan transform dan opacity alih-alih top, left, width, atau margin, karena properti tersebut memaksa layout dihitung ulang di setiap frame. Tambahkan will-change hanya pada elemen yang akan segera dianimasikan. Atur kurva easing dengan generator cubic-bezier, tambahkan spinner dari generator CSS loader, dan padukan animasi dengan box shadow atau gradient.
Juga dicari sebagai: keyframes css, generator @keyframes, editor keyframe css, cara membuat animasi css, animasi keyframe css, css timeline editor.
Tool yang cocok dipakai bersama Generator CSS Keyframes
- Generator Animasi CSS — Desain animasi CSS di atas timeline keyframe sungguhan.
- Generator Animasi Hover CSS — Rancang animasi hover untuk tombol, kartu, tautan, dan ikon.
- Kalkulator clamp() — Masukkan ukuran minimum dan maksimum serta rentang viewport, lalu dapatkan nilai clamp() yang ramah zoom dengan penjelasan perhitungannya, pratinjau langsung, dan skala tipografi atau spasi fluid yang lengkap.
- Konverter PX ke REM — Konversi antara pixel, rem, dan em dengan ukuran font root kamu sendiri, atau tempel seluruh stylesheet dan ubah semua nilai px sekaligus.
Pertanyaan yang sering diajukan
Apakah CSS yang dihasilkan boleh digunakan secara gratis?
Bisakah saya mengedit animasi yang sudah ada?
Bagaimana cara memulai animasi saat elemen masuk ke area layar?
animation-timeline: view() tanpa JavaScript di browser yang mendukungnya.Apakah ini bisa dipakai dengan Tailwind CSS?
tailwind.config.js untuk v3 dan blok @theme untuk v4, sehingga kamu bisa memakai animasinya sebagai class animate-*.Properti apa yang paling bagus untuk animasi yang halus?
transform dan opacity dijalankan oleh compositor GPU dan tetap halus bahkan di ponsel yang lambat. Blur, shadow, warna, dan border radius lebih berat, jadi gunakan seperlunya pada elemen yang besar.