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

Beoordeel deze tool

4.8 / 5 · 79 beoordelingen

More Tools

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

Blijf op de hoogte

Ontvang wekelijkse dev-tips en nieuwe tools.

Geen spam. Altijd opzegbaar.

Enjoy these free tools?

☕Buy Me a Coffee