Generator Animasi CSS

Buat animasi keyframe CSS secara visual dengan preview langsung.

Preset

Durasi (s)

Fungsi timing

Tunda (s)

Iterasi

Arah

Mode isi

Preview langsung

Output CSS

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-30px); }
}

.animated-element {
  animation: bounce 1s ease 0s infinite normal none;
}

Generator animasi CSS gratis

Buat animasi CSS dengan preview real-time dan ekspor kode.

Tips

Gunakan ease-in-out untuk animasi halus
Pertahankan animasi di bawah 300ms
Gunakan transform dan opacity untuk performa
forwards mempertahankan status akhir
Gunakan animation-delay untuk menyebar

FAQ

Apa itu animasi CSS keyframe?

Animasi keyframe mendefinisikan langkah menengah dengan aturan @keyframes.

Fungsi timing apa saja?

ease, linear, ease-in, ease-out, ease-in-out dan cubic-bezier.

Bagaimana mengulang?

Atur iterasi ke "infinite".

Apa itu fill-mode?

fill-mode menentukan bagaimana gaya diterapkan sebelum dan sesudah animasi.

Apakah gratis?

Ya, sepenuhnya gratis.

Alat terkait

CSS Gradient Generator Color Palette Generator CSS Grid Generator Box Shadow Generator

𝕏 Twitter in LinkedIn

Nilai alat ini

4.8 / 5 · 79 penilaian

Alat Lainnya

🌈CSS Gradient Generator 📦CSS Box Model Visualizer 📐CSS Flexbox Generator

Tetap Update

Dapatkan tips dev mingguan dan tool baru.

Tanpa spam. Berhenti kapan saja.

Enjoy these free tools?

☕Buy Me a Coffee