TL
Tool Lab
💰Donate
💰Donate

CSS Animation Generator

Build CSS keyframe animations with live preview.

Box
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.element {
  animation: fadeIn 1s ease 0s 1 normal both;
}

Tentang alat ini

Generator Animasi CSS membuat animasi halus dengan mengonfigurasi preset keyframe, timing, durasi, penundaan, dan iterasi. Pratinjau langsung menampilkan animasi secara langsung.

Animasi CSS menggunakan transform dan opacity efisien karena disusun di GPU dan tidak memicu layout atau repaint.

Cara penggunaan

  1. Pilih jenis animasi dari dropdown.
  2. Atur durasi (mis. 0.5s, 2s).
  3. Pilih fungsi waktu untuk mengontrol easing.
  4. Opsional atur penundaan sebelum animasi dimulai.
  5. Atur jumlah iterasi (angka atau infinite).
  6. Klik Putar ulang untuk pratinjau, lalu Salin untuk mengekspor CSS.

Kasus penggunaan

Pengembang front-end menggunakan animasi fade dan slide untuk meningkatkan performa yang dirasakan. Desainer UI membuat prototipe micro-interaction seperti pulse tombol dan goyangan notifikasi.

Pertanyaan umum

  • Apa itu fill-mode: both? — Animasi menerapkan gaya awal sebelum dimulai dan mempertahankan gaya akhir setelah selesai. Ini adalah pengaturan yang paling berguna.
  • Bagaimana membuat animasi berulang selamanya? — Atur jumlah iterasi menjadi infinite.
  • Apakah animasi CSS lebih baik dari JavaScript? — Untuk efek sederhana dan deklaratif, animasi CSS lebih disukai. Untuk sekuensing kompleks, JavaScript menawarkan lebih banyak kontrol.