Skip to main content

CSS Animation Generator

Create CSS keyframe animations with presets and visual preview. Doubles as an animate-CSS generator and keyframe maker.

Geprüft von · Zuletzt geprüft

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

animation: bounce 1s ease 0s infinite normal none;

Eine Animation erstellen

  1. Wähle ein Preset - Bounce, Fade, Slide, Spin, Pulse, Shake, Flip, Zoom - aus dem Preset-Raster. Jedes entspricht einer kanonischen @keyframes-Regel.
  2. Passe das Timing an: Die Dauer steuert, wie lange eine Iteration dauert, Verzögerung verzögert den Start, die Iterationsanzahl legt fest, wie oft sie abgespielt wird (oder infinite), und die Richtung steuert die Vorwärts-/Rückwärts-/Wechsel-Wiedergabe.
  3. Wähle eine Timing-Funktion - linear, ease, ease-in, ease-out, ease-in-out oder eine benutzerdefinierte cubic-bezier()-Kurve. Das ist der wichtigste Hebel dafür, wie sich die Animation "anfühlt".
  4. Lege fill-mode fest, um zu entscheiden, welche Stile vor dem Start der Animation und nach ihrem Ende gelten - forwards sperrt den letzten Keyframe, was die meisten realen UI-Animationen benötigen.
  5. Beobachte die Live-Vorschau. Das Vorschau-Element läuft deine Animation wiederholt ab, damit du Easing, Dauer und Gefühl beurteilen kannst, bevor du kopierst.
  6. Kopiere CSS. Die Ausgabe enthält sowohl die @keyframes-Regel als auch die animation-Kurzschreibweise, bereit zum Einfügen in dein Stylesheet.

Was die Animations-Engine tatsächlich tut

CSS-Animationen sind in CSS Animations Module Level 1 definiert, das die @keyframes-At-Regel und die animation-*-Eigenschaftsfamilie einführte. Wenn auf ein Element eine Animation angewendet wird, samplet die Style-Engine des Browsers die Keyframe-Werte bei jedem Frame basierend auf der verstrichenen Zeit und der Timing-Funktion, interpoliert Zwischenwerte gemäß der animierbaren Eigenschaft. Das Ergebnis wird durch die normale Paint-/Composite-Pipeline gedrückt - außer für compositor-freundliche Eigenschaften (transform und opacity), die Paint vollständig überspringen und auf der GPU laufen.

Dieser Compositor-Unterschied ist das wichtigste Leistungskonzept bei CSS-Animationen. Das Animieren von transform: translate3d und opacity kann auf jedem Gerät mit 60fps laufen, weil der Hauptthread nach dem Einschreiben der Keyframes nicht beteiligt ist. Das Animieren von width, height, top, margin oder background-color zwingt den Browser, bei jedem Frame Layout oder Paint neu auszuführen, was auf mobilen Geräten leicht auf 30fps fällt. Chromes "Performance"-Tab wird "Forced reflow"- und "Paint"-Ereignisse markieren, wenn du die falschen Eigenschaften animierst. Der will-change: transform-Hinweis befördert ein Element vorab auf seine eigene Compositor-Ebene, was die Erstrahmen-Kosten eliminiert, aber GPU-Speicher verbraucht - verwende ihn nur für Elemente, die bald tatsächlich animieren werden.

Fälle, in denen Animation die richtige Wahl ist

  • Lade-Spinner mit @keyframes spin mit transform: rotate(360deg) und animation: spin 1s linear infinite.
  • Eingangsübergänge, wenn sich ein Modal öffnet oder ein Toast erscheint - Fade plus Slide gibt die Illusion von Tiefe.
  • Aufmerksamkeits-Pulse auf ungelesenen Benachrichtigungs-Badges (sparsam).
  • Skeleton-Shimmer-Lader, die background-position auf einem Verlauf animieren.
  • Mikrointeraktionen wie Button-Druck-Feedback, Herz-Symbol-Sprünge, Warenkorb-Hinzufügen-Flüge.
  • Hero-Hintergrundeffekte - langsame hue-rotate- oder Verlaufspositions-Verschiebungen für Umgebungsbewegung.

Fallstricke, die in der Produktion beißen

  • Respektiere prefers-reduced-motion. Benutzer mit vestibulären Störungen können durch Parallax-, Zoom- und Shake-Animationen Übelkeit empfinden. Verpacke dekorative Animationen in @media (prefers-reduced-motion: no-preference), damit Benutzer, die Bewegung deaktiviert haben, sie nie sehen.
  • Das Animieren von Layout-Eigenschaften tötet die Bildrate. Animiere transform und opacity, nicht width, height, top, left oder padding. Für eine "Schiebe-Schublade" verwende transform: translateX(-100%) zu translateX(0) statt left zu ändern.
  • Animations-Ketten werden schwer zu debuggen. Mehrere animation-delay-Werte, die auf Geschwistern gestapelt sind, sehen anfangs gut aus, werden aber unwartbar. Die moderne Alternative ist die Web Animations API (WAAPI) in JavaScript oder CSS-Scroll-gesteuerte Animationen (animation-timeline: scroll()) zum Verketten.
  • animation-fill-mode: forwards ist normalerweise für Eingangsanimationen erforderlich - sonst springt das Element nach dem letzten Keyframe auf seinen Vor-Animations-Zustand zurück.
  • Unendliche Animationen halten den Hauptthread aktiv, auch wenn sie nicht sichtbar sind. Pausiere sie mit animation-play-state: paused, wenn das Element nicht sichtbar ist (z.B. über IntersectionObserver), um Akku auf mobilen Geräten zu sparen.
  • cubic-bezier()-Werte außerhalb von 0-1 auf der y-Achse können überschießen, was großartig für Bounce-Effekte ist, aber Eigenschaften bricht, die nicht negativ werden können (wie opacity). Die Vorschau erfasst diese visuell.

Spezifikations-Hintergrund und verwandte Standards

CSS Animations Module Level 1 war ursprünglich ein WebKit-Vorschlag von 2009 und wurde 2013 ein W3C-Working-Draft. Die @keyframes-At-Regel und das animation-Kurzschreibweise sind beide dort definiert. Level 2 fügte Scroll-gesteuerte Animationen hinzu - animation-timeline: scroll() und animation-timeline: view() - die in Chrome 115+ ausgeliefert wurden. Das verwandte CSS Transitions Module Level 1 handhabt implizite Zustandswechsel-Animationen und ist einfacher, wenn du nur zwei Keyframes benötigst. Die Web Animations API (WAAPI) bietet dieselben Primitive mit prozeduraler JS-Kontrolle. Für Timing-Funktionen unterstützt CSS Level 4s linear()-Multi-Stop-Funktion und steps() für Sprite-Sheet-Animationen. Browser-Unterstützung per caniuse.com/css-animation ist universell für Level 1; Scroll-gesteuerte Animationen benötigen Fallbacks.

CSS-Animation vs. Alternativen

CSS-Animationen sind das richtige Werkzeug für deklarative, "fire-and-forget"-Visualeffekte - Lader, Eingangs-/Ausgangsübergänge, Hover-Akzente. Sie sind GPU-freundlich, wenn sie richtig gemacht werden, komponieren mit Design-Token über CSS-Variablen und erfordern kein JavaScript. Wo sie verlieren: interaktive Animationen, die auf Benutzereingaben mid-flight reagieren, komplexe Sequenzierung, physikbasierte Bewegung (Federn, Trägheit). Dafür gibt die Web Animations API oder eine Bibliothek wie Framer Motion oder GSAP imperatives Kontrolle. Im Vergleich zu <img src="lader.gif"> sind CSS-Animationen schärfer, themefähig und wiegen fast nichts. Im Vergleich zu Lottie oder SVG SMIL ist CSS schneller zu erstellen, aber weniger ausdrucksstark für komplexe Charakter-Animationen. Faustregel: Wenn ein Designer die Animation in vier Keyframes skizzieren kann und sie jedes Mal gleich abspielt, verwende CSS. Wenn sie reagieren oder synchronisieren muss, greife auf JavaScript zurück.

Häufig gestellte Fragen

Welche CSS-Eigenschaften sind günstig zu animieren?

Nur <code>transform</code> und <code>opacity</code> können auf dem Compositor-Thread animiert werden, ohne Paint oder Layout auszulösen. Alles andere - <code>width</code>, <code>height</code>, <code>margin</code>, <code>top</code>, <code>left</code>, <code>background-color</code>, <code>color</code>, <code>font-size</code>, <code>filter</code> - erzwingt einen Layout- oder Paint-Durchlauf bei jedem Frame, was auf mobilen Geräten die Bildrate unter 30fps drücken kann. Für eine Slide-Animation verwende <code>transform: translateX()</code> statt <code>left</code>; für ein Fade verwende <code>opacity</code> statt <code>visibility</code>; für ein Scale verwende <code>transform: scale()</code> statt <code>width</code> und <code>height</code>.

Was ist der Unterschied zwischen Animation und Transition?

Eine <code>transition</code> wird ausgelöst, wenn sich eine Eigenschaft ändert (typischerweise bei Hover, Focus oder Klassen-Toggle) und interpoliert zwischen dem alten und neuen Wert. Eine <code>animation</code> verwendet <code>@keyframes</code>, um eine vollständige Zeitleiste von Stilen zu beschreiben, läuft unabhängig von Zustandsänderungen nach einem Zeitplan und kann loopen, umkehren oder alternieren. Transitions sind besser für zustandsgesteuerte Mikroeffekte (Button-Hover hellt auf); Animationen sind besser für eigenständige Effekte (Spinner, pulsierende Benachrichtigung). Beide können auf demselben Element koexistieren.

Wie stoppe ich eine Animation in der Mitte?

Setze <code>animation-play-state: paused</code>, um die Animation am aktuellen Frame einzufrieren, ohne sie zurückzusetzen - der nächste <code>running</code>-Wert setzt von dort fort. Um sie vollständig abzubrechen, entferne die Animation aus der <code>animation-name</code>- Liste (oder entferne die Klasse, die sie anwendet). In JavaScript gibt die Web Animations API mehr Kontrolle: <code>element.getAnimations()[0].pause()</code>, <code>cancel()</code>, <code>finish()</code> oder <code>reverse()</code> sind alle Standard.

Warum sehen Benutzer manchmal, wie meine Animation zum Start zurückblinkt?

Weil <code>animation-fill-mode</code> standardmäßig <code>none</code> ist, was bedeutet, dass nach dem letzten Keyframe das Element auf seinen Vor- Animations-Stil zurückspringt. Für Eingangsanimationen (Fade in, Slide in) möchtest du fast immer <code>animation-fill-mode: forwards</code>, um die Werte des letzten Keyframes beizubehalten. Für zyklische Animationen (Spinner, Pulse) ist <code>none</code> in Ordnung, weil sie für immer loopen und nie enden.

Sendet dieser Generator meine Animationseinstellungen irgendwo hin?

Nein. Das Preset, die Timing-Werte und alle anderen Steuerelemente leben im Komponentenzustand in deinem Browser. Die <code>@keyframes</code>-Regel wird in einen <code>&lt;style&gt;</code>-Block injiziert, der lokal zur Vorschau ist, und die Animationseigenschaft des Vorschau-Elements wird über Inline-Styles gesetzt. Es gibt keinen Server-Roundtrip für das Vorschau-Rendering.

Wie soll ich mit Benutzern umgehen, die reduzierte Bewegung bevorzugen?

Verpacke Animationen in eine Media-Query: <code>@media (prefers-reduced-motion: no-preference) { .element { animation: ...; } }</code>. Das respektiert die "Bewegung reduzieren"-Einstellung auf Betriebssystemebene und verhindert, dass bewegungsempfindliche Benutzer Animationen sehen, die sie deaktiviert haben. Für wesentliche Animationen biete einen einfacheren statischen Fallback statt sie vollständig zu deaktivieren.

Was ist die beste Dauer für eine UI-Animation?

Forschungen von Googles Material Design und Apples Human Interface Guidelines konvergieren auf 150-300ms für die meisten UI-Übergänge - lang genug, um als Übergang wahrgenommen zu werden, kurz genug, um nicht träge zu wirken. Größere Elemente können bis zu 400ms gehen; kleines Hover-Feedback sollte unter 150ms bleiben. Für dekorative Animationen (Hero-Pulse, Hintergrundverläufe) sind 1-3 Sekunden eher ambient als interaktiv.

Wie debugge ich eine CSS-Animation, die falsch aussieht?

Chrome DevTools hat ein dediziertes "Animationen"-Panel (Weitere Tools > Animationen), das jede Animation auf der Seite aufzeichnet, dir erlaubt, durch Keyframes zu scrubben, Timing-Funktionen mit einem visuellen Kurven-Editor anzupassen und alle Animationen um 10x oder 25x zu verlangsamen. Firefoxs "Animationen"-Panel hat ähnliche Funktionen.

Was ist der Unterschied zwischen ease-in, ease-out und ease-in-out?

<code>ease-in</code> startet langsam und beschleunigt - gut für Elemente, die den Bildschirm verlassen. <code>ease-out</code> startet schnell und verlangsamt sich - gut für ankommende Elemente, die sanft landen. <code>ease-in-out</code> kombiniert beides, was für Zwei-Zustands-Übergänge das "natürlichste" Gefühl erzeugt. <code>linear</code> bewegt sich mit konstanter Geschwindigkeit und sollte für Rotation und andere kontinuierliche Bewegung reserviert werden - lineares Easing bei Translate oder Scale sieht roboterhaft aus.

Ist das dasselbe wie ein Animate-CSS-Generator oder ein Keyframe-Generator?

Ja. "Animate CSS Generator", "CSS animieren", "Keyframe-Animations-Generator" und "CSS-Keyframe-Generator" verweisen alle auf ein Werkzeug, das einen <code>@keyframes</code>-Block plus eine zugehörige <code>animation</code>- Kurzschreibweise erzeugt. Diese Seite schreibt beides. Wenn du die beliebte animate.css-Bibliothek verwendet hast, werden dir die integrierten Bounce/Fade/Slide/Spin-Presets hier vertraut vorkommen - sie bilden dieselben kanonischen Keyframes ab, werden aber als einfaches CSS geliefert, das du ohne die Bibliotheksabhängigkeit in jedes Projekt kopieren kannst.

Mehr CSS & Design

Aspect Ratio Calculator

Calculate and visualize aspect ratios for any dimensions.

Open tool

Blob Shape Generator

Generate organic blob shapes as SVG.

Open tool

Border Radius Generator

Create CSS border-radius with a visual corner editor.

Open tool

CSS Box Shadow Generator

Create CSS box shadows with a visual editor. CSS box-shadow generator, shadow maker and box-shadow builder with live preview, multi-layer support and Material elevation presets.

Open tool

Color Palette Generator

Generate harmonious color palettes, Tailwind-style 50-900 scales and design-system tokens from any base hex color. Also a hex color palette generator (Farbpalette Generator auf Deutsch).

Open tool

Color Picker

Pick colors visually and get HEX, RGB, and HSL values.

Open tool