CSS-Animationen mit Live-Preview bauen

Was macht der CSS-Animation-Builder?

Der Builder erzeugt CSS-Keyframe-Animationen visuell. Pro Keyframe legst du den Offset (0–100 %) und die Properties fest — translateX, translateY, scale, rotate, opacity, color, backgroundColor, filter. Die Live-Vorschau spielt das Ergebnis sofort, ein Replay-Button startet die Animation neu, der Slow-Mo-Toggle verdreifacht die Laufzeit für genaues Debuggen.

31 Preset-Animationen decken die klassischen Patterns ab: Eintritts-Effekte (Fade In, Slide In, Zoom In, Flip In X), Aufmerksamkeits-Trigger (Pulse, Heartbeat, Shake, Wiggle, Soft-Bounce, Tada, Rubber-Band) und Austritts-Animationen (Fade Out, Slide Out, Zoom Out, Collapse). Jeder Preset ist composited-friendly — keine width/height-Animationen versteckt im Stack.

Der Output kommt in drei Formaten: Plain CSS mit @keyframes-Block und animation:-Shorthand, Tailwind-v4-@theme-Block für class="animate-name"-Nutzung, oder ein Web-Animations-API-JavaScript-Snippet für programmatische Steuerung. Alle drei sind paste-ready inklusive des automatisch emittierten @media (prefers-reduced-motion)-Blocks.

Warum ist prefers-reduced-motion Pflicht?

WCAG 2.2 Erfolgskriterium 2.3.3 „Animation from Interactions” verlangt, dass Animationen, die durch User-Interaktion ausgelöst werden, vom Nutzer abschaltbar sind. Browser implementieren das über das CSS-Media-Query prefers-reduced-motion, das den OS-Einstellungen folgt: macOS „Bewegung reduzieren”, Windows „Animationseffekte deaktivieren”, iOS „Bewegung reduzieren” in den Bedienungshilfen.

Wer das ignoriert, schließt zwei große Gruppen aus: Menschen mit vestibulären Störungen (Schwindel, Übelkeit bei großen Bewegungen) und Menschen mit Aufmerksamkeitsstörungen (animierte Inhalte ziehen die Aufmerksamkeit kontinuierlich ab). Der Generator macht den Fallback nicht optional — jeder Output enthält automatisch:

@media (prefers-reduced-motion: reduce) {
  .animated {
    animation: none;
  }
}

Vier Strategien sind verfügbar: none schaltet die Animation komplett ab, opacity-only reduziert auf reine Fade-Übergänge ohne Bewegung, instant lässt die Animation mit 0.01 ms laufen (Endzustand bleibt erhalten, kein Sprung), oder ein eigener Keyframe-Stack für komplexe Fälle.

Welche Properties bremsen den Browser?

Browser-Rendering verläuft in drei Phasen pro Frame: Layout (Berechne Positionen und Größen), Paint (Zeichne Pixel), Compositing (Stapele Layer). web.dev klassifiziert Properties danach, welche Phase sie auslösen:

• Composited only — transform, opacity, filter, backdrop-filter. Der Browser kann diese Animationen auf eigene Compositor-Layer auslagern; Main-Thread bleibt frei, 60 fps auch auf Mobil sind realistisch.
• Paint-trigger — color, background-color, box-shadow. Browser muss pro Frame neu zeichnen. Auf Desktop unkritisch, auf Low-End-Mobilgeräten spürbar.
• Layout-trigger — width, height, top, left, margin, padding, font-size, border-width. Browser muss pro Frame das gesamte Layout neu berechnen, oft kaskadierend durch Geschwister-Elemente. Garantiert ruckelig auf Mobil.

Der Generator scannt jeden Keyframe und zeigt eine orange umrahmte Warnung, sobald eine Layout- oder Paint-Property aktiv ist. Vorschläge sind konkret: width → transform: scaleX(), top → transform: translateY(), margin → transform: translate(). Die Umstellung kostet meist nur eine Keyframe-Property — das Ergebnis sieht identisch aus.

Wie funktionieren Easing-Kurven?

Eine Easing-Funktion beschreibt die Beschleunigung über die Animationsdauer. linear ist konstant — wirkt mechanisch und ist meist die falsche Wahl. ease-out startet schnell, läuft sanft aus — die natürlichste Wahl für UI-Eintritte. ease-in-out startet und endet langsam — angemessen für Hover-Transitions.

Die meisten Standardkurven (CSS-ease, ease-in, ease-out, ease-in-out) sind eher rund und weich. Für refined-minimalism-Designs ist die quint-Familie schärfer und präziser — cubic-bezier(0.16, 1, 0.3, 1) für quint-out ist der Standard des kittokit-Design-Systems selbst. Die back-Familie hat ein kleines Überschießen am Ende (cubic-bezier(0.175, 0.885, 0.32, 1.275) für back-out) und ist die saubere Alternative zu rubbery bounce-Animationen.

31 Preset-Kurven sind verfügbar, gruppiert nach Familie: Linear, Standard, Quint, Quart, Cubic, Quad, Expo, Circ, Back, Sine, Steps. Wer die exakte Kurve braucht, schaltet auf den Cubic-Bezier-Editor um und zieht die vier Handle-Werte (x1, y1, x2, y2) selbst.

Wann lohnt sich die Web-Animations-API?

CSS-@keyframes läuft deklarativ — der Browser steuert den Verlauf, JavaScript hat nur indirekte Kontrolle über animation-play-state oder Class-Toggles. Sobald du pause(), currentTime-Seek, playbackRate-Änderungen oder programmatisches reverse() brauchst, ist die Web-Animations-API (element.animate()) die saubere Wahl.

Drei typische Use-Cases:

• Scrollytelling. Animationsfortschritt soll an die Scroll-Position gekoppelt sein. Mit WAAPI setzt du animation.currentTime = scrollProgress * animation.effect.getTiming().duration. Reine CSS-Animation kann das nicht.
• Sequenzierte Story-Flows. Mehrere Animationen sollen nacheinander laufen, mit Callback nach jedem Schritt. WAAPI gibt jede animate()-Aufruf-Rückgabe ein Promise-Interface über animation.finished.
• Interaktive Steuerung. Pause/Play-Buttons, „Animation umkehren”-Toggle, „Animation auf 50 % springen”-Slider. Mit CSS-only musst du Klassen toggeln und auf animationend warten; WAAPI hat direkte Methoden.

Der Generator emittiert den WAAPI-Snippet inklusive eines prefers-reduced-motion-Guards: wenn der Nutzer die Bewegungsreduzierung aktiviert hat, läuft die Animation mit 1 ms statt der vollen Dauer und behält nur den End-Zustand.

Wie funktionieren scroll-getriebene Animationen?

Seit Chrome 115 (stable) und Edge 115 funktioniert animation-timeline: scroll() — die Animation läuft nicht über Zeit, sondern über die Scroll-Position des nächsten scrollbaren Vorfahren. Firefox arbeitet daran (Feature-Flag), Safari ist noch nicht so weit. Das macht klassische Scrollytelling-Patterns (Parallax, Progress-Bar, Pin-Scrub) ohne JavaScript möglich.

Der Generator hat einen opt-in Toggle dafür. Wenn aktiv, wird der Output in einen @supports (animation-timeline: scroll())-Block gewickelt:

@supports (animation-timeline: scroll()) {
  .animated {
    animation-name: myAnim;
    animation-timeline: scroll();
    animation-duration: auto;
  }
}

Browser ohne Support fallen still zurück auf die zeitbasierte Animation. Für Production außerhalb Chrome-only empfiehlt sich der Scroll-Driven-Animations-Polyfill — er liefert die fehlenden Browser-APIs in ~12 kB JavaScript.

Caveat: der Generator markiert die Feature klar als „Limited Availability”. Wer den Toggle aktiviert, sollte sich bewusst sein, dass Safari- und Firefox-Nutzer aktuell auf die zeitbasierte Fallback-Animation angewiesen sind.

Welche Animation-Patterns nutzt man wo?

Eintritts-Animationen (Fade In, Slide In, Zoom In) sind richtig für Content, der nach einem User-Trigger erscheint — Modal-Sheets, Toast-Notifications, expandierende Accordion-Items. 200–400 ms Dauer mit quint-out oder cubic-out ist die unauffällige Wahl. Längere Dauern (>500 ms) wirken künstlich verlangsamt.

Aufmerksamkeits-Trigger (Pulse, Shake, Wiggle, Soft-Bounce) markieren wichtige Elemente — eine Validierungs-Fehlermeldung am Form-Feld, ein neuer Notification-Badge im Header, ein „Pflichtfeld”-Hinweis. infinite Iteration nur sparsam einsetzen — eine dauerhaft pulsierende Schaltfläche wird schnell penetrant. Lieber 2–3 Iterationen bei User-Aktion, dann Stop.

Austritts-Animationen (Fade Out, Slide Out, Zoom Out) sind die häufig vergessene Hälfte. Wer ein Modal eintreten lässt und beim Schließen einfach display: none setzt, springt visuell hart. 150–250 ms cubic-in als Austritt fühlen sich symmetrisch zum Eintritt an.

Hover-Transitions sind kein Animation-Builder-Use-Case — dafür reicht transition: transform 200ms var(--ease-out). Animationen sind state-driven; Transitions sind property-driven. Die Trennung sauber halten.

Wie nutze ich CSS-Animationen in Tailwind v4?

Tailwind v4 ersetzt die JS-Config der v3-Ära mit einem CSS-First-@theme-Block. Animationen werden über --animate-{name} Custom-Properties registriert; Tailwind generiert daraus automatisch die Utility-Klasse animate-{name}:

@theme {
  --animate-fadeInUp: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal both;

  @keyframes fadeInUp {
    0% {
      opacity: 0;
      transform: translateY(24px);
    }
    100% {
      opacity: 1;
      transform: translateY(0px);
    }
  }
}

Daraus wird <div class="animate-fadeInUp">…</div> als wiederverwendbare Utility verfügbar. Der Generator gibt diesen Block paste-ready aus, inklusive des @media (prefers-reduced-motion)-Fallbacks, scoped auf die generierte Utility-Klasse.

Der Tailwind-Output ist die kompakteste Variante für Design-Systeme — die Animation wird einmal definiert und kann an beliebig vielen Elementen wiederverwendet werden. Plain CSS ist die richtige Wahl für isolierte Komponenten oder One-Off-Animationen ohne Design-System.

Häufige Fragen

Was macht ein CSS-Animation-Builder?

Der Builder erzeugt CSS-Keyframe-Animationen visuell. Du setzt Stops auf einer Zeitachse, wählst Properties pro Stop (transform, opacity, color), pickst eine Easing-Kurve und siehst das Ergebnis live. Der Output ist paste-ready in drei Formaten — Plain CSS, Tailwind v4 oder Web-Animations-API.

Wie funktioniert prefers-reduced-motion?

Das CSS-Media-Query erkennt, wenn ein Nutzer in seinen OS-Einstellungen Bewegungsreduzierung aktiviert hat. Der Generator emittiert automatisch einen @media (prefers-reduced-motion: reduce)-Block mit konfigurierbarem Fallback — Animation aus, nur Opacity, sofort (0.01 ms) oder eigene Keyframes. WCAG 2.2 Erfolgskriterium 2.3.3 fordert das für UI-Animationen.

Welche CSS-Properties sind composited und schonen die Performance?

transform (translate, scale, rotate), opacity, filter und backdrop-filter werden vom Browser auf eigenen Compositor-Layern animiert — ohne Layout-Reflow, ohne Repaint. Animationen auf width, height, top, left, margin zwingen den Browser zu Layout-Reflow pro Frame und ruckeln auf Mobilgeräten. Der Generator warnt live, wenn eine solche Property animiert wird, und schlägt die transform-Alternative vor.

Was ist der Unterschied zwischen CSS-Animationen und der Web-Animations-API?

CSS-@keyframes läuft deklarativ — Browser steuert den Verlauf, du hast keine direkte Kontrolle. Die Web-Animations-API (element.animate()) gibt dir ein Animation-Objekt mit pause(), play(), reverse(), currentTime und playbackRate. Für Scroll-getriebene Interaktionen, JavaScript-gesteuerte Sequenzen und programmatisches Seek ist WAAPI die saubere Wahl.

Wie nutze ich CSS-Animationen in Tailwind v4?

Tailwind v4 erlaubt seit der CSS-First-Config einen @theme-Block, der --animate-{name} Custom-Properties plus die zugehörigen @keyframes direkt entgegennimmt. Daraus generiert Tailwind automatisch die Utility-Klasse animate-{name}. Der Generator gibt diesen Block paste-ready aus.

Was sind Cubic-Bezier-Easing-Kurven?

Eine Cubic-Bezier-Kurve beschreibt die Beschleunigung einer Animation über vier Kontrollpunkte. cubic-bezier(0.16, 1, 0.3, 1) ist quint-out — ein schneller Start, dann sanftes Auslaufen. Refined-Minimalism-Design favorisiert Quint-out für UI-Eintritte und Back-out (kleines Überschießen) als Alternative zu bounce. Der Builder hat ein 31-Preset-Rail plus drag-baren Handle-Editor.

Funktioniert Scroll-Driven-Animation schon zuverlässig?

animation-timeline: scroll() ist seit Chrome 115 stabil und in Firefox in Arbeit; Safari ist noch nicht so weit. Der Generator emittiert die Scroll-Driven-Variante optional in einem @supports (animation-timeline: scroll())-Block — Browser ohne Support fallen still zurück auf die zeitbasierte Animation. Für Production außerhalb Chrome-only empfiehlt sich der scroll-driven-animations-Polyfill.

Was bedeuten fill-mode: forwards und backwards?

fill-mode legt fest, welche Werte vor und nach der Animation gelten. forwards hält den End-Frame fest — nach Ablauf bleibt das Element im Zielzustand. backwards wendet den Start-Frame schon während eines animation-delay an. both kombiniert beides. none (Default) ist meist die falsche Wahl: das Element springt nach der Animation zurück auf seinen ursprünglichen Stil.

Wie viele Keyframes sind sinnvoll?

Zwei reichen für klassische Fade-, Slide- oder Zoom-Patterns — Start und Ende. Drei bis fünf erlauben einen Pulse, Shake oder Wiggle mit klarem Rhythmus. Mehr als zehn Keyframes wird unübersichtlich und nähert sich Spring-Physics-Verhalten — dafür ist die Web-Animations-API mit JavaScript-Loop die bessere Wahl.

Speichert das Tool meine Animationen?

Nein. Alle Eingaben bleiben im Browser-Tab, nichts wird gespeichert oder hochgeladen. Beim Neuladen ist der Editor leer. Wer eine Animation sichern will, kopiert den CSS-Output in das eigene Stylesheet oder die tokens.css.

Welche CSS-Tools sind verwandt?

Weitere Tools für CSS-Authoring und Design-Token-Pflege:

• CSS-Gradient-Generator — Verläufe in OKLCH/Tailwind v4 bauen.
• Box-Shadow-Generator — Multi-Layer-Schatten visuell stapeln.
• Flexbox-Playground — Flex-Layout interaktiv lernen.
• CSS-Formatter — Rohes oder minifiziertes CSS sauber formatieren.