CSS-Animationsgenerator

CSS-Keyframe-Animationen visuell mit Live-Vorschau erstellen.

Vorlagen

Dauer (s)

Timing-Funktion

Verzoegerung (s)

Wiederholungen

Richtung

Fuellmodus

Live-Vorschau

CSS-Ausgabe

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

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

Kostenloser CSS-Animationsgenerator

Erstellen Sie CSS-Animationen visuell mit Echtzeit-Vorschau und Code-Export.

Tipps

ease-in-out fuer fliessende Animationen
Animationen unter 300ms fuer UI-Interaktionen
transform und opacity fuer beste Performance
forwards behalt den Endzustand
animation-delay zum Staffeln mehrerer Animationen

FAQ

Was sind CSS-Keyframe-Animationen?

CSS-Keyframe-Animationen definieren Zwischenschritte mit @keyframes-Regeln.

Welche Timing-Funktionen?

ease, linear, ease-in, ease-out, ease-in-out und benutzerdefiniertes cubic-bezier.

Animation wiederholen?

Setzen Sie die Wiederholungen auf "infinite".

Was ist fill-mode?

fill-mode bestimmt, wie Stile vor und nach der Animation angewendet werden.

Ist es kostenlos?

Ja, komplett kostenlos.

💬 User Feedback

Bewerten Sie dieses Tool

4.8 / 5 · 79 Bewertungen

Weitere Werkzeuge

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

Bleiben Sie informiert

Wöchentliche Dev-Tipps und neue Tools.

Kein Spam. Jederzeit abbestellbar.

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.