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

💬 User Feedback

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

How to Use

Choose an animation type or customize keyframes
Adjust timing, duration, and easing
Preview the animation in real-time
Copy the generated CSS code

Common Use Cases

Creating hover effects
Building loading animations
Adding entrance/exit animations
Prototyping UI interactions

Frequently Asked Questions

What animation types are available?

Fade, slide, bounce, rotate, scale, flip, pulse, shake, and custom keyframe animations.

Can I customize the timing?

Yes. Adjust duration, delay, iteration count, direction, fill mode, and timing function (easing).

Will it work in all browsers?

Generated CSS includes vendor prefixes for maximum browser compatibility.