CSS Animatie Generator

Maak CSS keyframe-animaties visueel met live preview.

Presets

Duur (s)

Timing-functie

Vertraging (s)

Herhalingen

Richting

Vulmodus

Live preview

CSS Output

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

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

Gratis CSS animatie generator

Maak CSS-animaties met realtime preview en code-export.

Tips

Gebruik ease-in-out voor vloeiende animaties
Houd animaties onder 300ms
Gebruik transform en opacity voor prestaties
forwards behoudt de eindstaat
Gebruik animation-delay om te spreiden

FAQ

Wat zijn CSS keyframe-animaties?

CSS keyframe-animaties definiëren tussenstappen met @keyframes regels.

Welke timing-functies?

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

Hoe herhalen?

Stel herhalingen in op "infinite".

Wat is fill-mode?

fill-mode bepaalt hoe stijlen worden toegepast voor en na de animatie.

Is het gratis?

Ja, volledig gratis.

Gerelateerde tools

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

𝕏 Twitter in LinkedIn

💬 User Feedback

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.