CSS Animation Generator

Generieren Sie CSS Keyframe-Animationen visuell. Wählen Sie Animationstyp, Dauer, Easing und Iterationen aus und erhalten Sie kopierfertige CSS-Code.

Animation preset:

Duration (s)

Delay (s)

Easing

Iterations

Direction

Fill Mode

Preview

Generated CSS

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.animated-element {
  animation-name: fadeIn;
  animation-duration: 0.6s;
  animation-timing-function: ease;
  animation-iteration-count: 1;
  animation-fill-mode: both;
}

/* Shorthand */
.animated-element {
  animation: fadeIn 0.6s ease 0s 1 both;
}

So verwenden Sie CSS Animation Generator

1Wählen Sie eine Animationsvoreinstellung (fade, slide, bounce, spin usw.).
2Passen Sie Dauer, Verzögerung, Easing und Iterationszahl an.
3Zeigen Sie die Animation im Browser in Echtzeit in der Vorschau an.
4Kopieren Sie die generierten CSS Keyframes und die Animation-Eigenschaft.

ZenovayAnalytics

Wissen Sie, was Ihre Besucher wirklich tun.

Besucher-Tracking in Echtzeit
Datenschutz zuerst, kein Cookie-Banner
In zwei Minuten eingerichtet

Zenovay entdecken

Häufig gestellte Fragen

Was ist der Unterschied zwischen CSS-Übergängen und Animationen?▾

CSS-Übergänge animieren eine Eigenschaftsänderung zwischen zwei Zuständen, ausgelöst durch ein Ereignis (Hover, Fokus, Klassenänderung): transition: opacity 0.3s ease. CSS-Animationen verwenden @keyframes, um mehrstufige Sequenzen zu definieren, die automatisch ablaufen: animation: fadeIn 1s ease forwards. Übergänge sind einfacher für Hover-Effekte; Animationen sind besser für kontinuierliche Effekte (Ladekreisel), Eingangseffekte oder mehrstufige Sequenzen, die ohne Benutzerinteraktion ablaufen.

Was sind Easing-Funktionen?▾

Easing-Funktionen steuern, wie eine Animation im Laufe der Zeit voranschreitet. Linear: konstante Geschwindigkeit. Ease: langsamer Start, schnellere Mitte, langsames Ende (Standard). Ease-in: langsamer Start, schnelles Ende. Ease-out: schneller Start, langsames Ende (gut für Ausgangsanimationen). Ease-in-out: langsam an beiden Enden. cubic-bezier(x1, y1, x2, y2): benutzerdefinierte Kurve. steps(n): sprunghafte/diskrete Schritte (gut für Sprite-Animationen).

Was bewirkt animation-fill-mode?▾

animation-fill-mode steuert, welche Stile gelten, wenn die Animation nicht abgespielt wird: none (Standard) – keine Stile aus Keyframes werden vor/nach angewendet. forwards – die Stile des letzten Keyframes bleiben nach dem Ende der Animation erhalten. backwards – die Stile des ersten Keyframes werden während der Verzögerungsphase angewendet. both – kombiniert forwards und backwards. Für Eingangsanimationen (wie fadeIn) verwenden Sie fill-mode: both, um zu verhindern, dass das Element in seinem Vor-Animations-Zustand aufflackert.

Wie löse ich Animationen beim Scrollen aus?▾

Nur CSS: verwenden Sie die animation-play-state-Eigenschaft. Fügen Sie eine Klasse mit animation-play-state: running per JavaScript hinzu, wenn das Element mit IntersectionObserver ins Sichtfeld scrollt. Modernes CSS: die @scroll-timeline- und animation-timeline: scroll()-API ermöglicht rein CSS-basierte scroll-gesteuerte Animationen in Chrome 115+. Ein einfacher Ansatz: Fügen Sie eine „animate"-Klasse per JavaScript hinzu, wenn das Element den Viewport betritt, und definieren Sie dann CSS-Animationen für diese Klasse.

Soll ich CSS-Animationen oder JavaScript-Animationen verwenden?▾

CSS-Animationen sind für einfache, diskrete Animationen bevorzugt – sie laufen auf dem Compositor-Thread und vermeiden Layout/Paint wo möglich. JavaScript (Web Animations API, GSAP, Framer Motion) ist besser für: komplexe Sequenzierung, interaktive Animationen, physikbasierte Bewegung und Animationen, die von Laufzeitwerten abhängen. Die Web Animations API gibt JavaScript Kontrolle über CSS-Animationen: element.animate([...keyframes], { duration: 300 }). GSAP ist der Goldstandard für komplexe Animationen.

Bild-Tools