CSS-Animationsgenerator

Bauen Sie CSS-@keyframes-Animationen visuell · wählen Sie eine Voreinstellung oder passen Sie Timing, Transformationen und Easing an. Kopieren Sie produktionsreifen Code.

Voreinstellungen

Einstellungen

Vorschau

Box

Generiertes CSS

So funktioniert es

  1. Animations-Voreinstellung wählen: Wählen Sie aus gängigen Animationen, Fade, Slide, Bounce, Spin, Pulse, Shake und mehr.
  2. Timing und Verhalten anpassen: Passen Sie Dauer, Verzögerung, Easing-Funktion, Iterationsanzahl und Fill-Modus an.
  3. CSS kopieren: Die vollständige @keyframes-Definition und die Animation-Kurzform sind bereit, in Ihr Stylesheet eingefügt zu werden.

Warum den CSS-Animations-Generator nutzen?

CSS-Animationen erwecken Oberflächen zum Leben, sie ziehen Aufmerksamkeit auf zentrale Elemente, geben Feedback und schaffen polierte Nutzererlebnisse. @keyframes-Regeln von Hand zu schreiben, erfordert Kenntnisse über die korrekte Syntax, Easing-Namen und Eigenschaftskombinationen. Dieser Generator bietet kuratierte Animations-Voreinstellungen mit Live-Vorschau und lässt Sie jeden Parameter anpassen, die Ausgabe ist produktionsreifes CSS ohne JavaScript oder Animationsbibliotheken.

Funktionen

Häufige Fragen

Was ist der Unterschied zwischen animation und transition in CSS?

CSS-Transitions werden bei Zustandsänderungen (Hover, Fokus, Klassen-Toggle) ausgelöst und animieren zwischen zwei Zuständen. CSS-Animationen verwenden @keyframes, um mehrere Zustände zu definieren, und laufen unabhängig von Nutzerinteraktion, sie können looped, umgekehrt und automatisch starten.

Was ist animation-fill-mode und warum spielt es eine Rolle?

animation-fill-mode steuert, ob das Element die Stile der Animation vor ihrem Start behält (backwards), nach ihrem Ende behält (forwards) oder beides. Ohne forwards springt das Element nach Ende der Animation in seinen Originalstil zurück.

Sind CSS-Animationen performance-freundlich?

Animationen, die nur transform und opacity verwenden, sind GPU-beschleunigt und sehr flüssig. Vermeiden Sie das Animieren von Layout-Eigenschaften wie width, height, margin oder top/left, sie lösen Layout-Neuberechnungen aus und verursachen Ruckler. Bleiben Sie für 60 fps bei transform und opacity.

Was CSS-Animationen wirklich tun

CSS-Animationen interpolieren eine oder mehrere CSS-Eigenschaften zwischen definierten Schlüsselbildern über die Zeit und erzeugen sichtbare Bewegung oder Veränderung ohne JavaScript. Das Modell hat zwei Teile: @keyframes-Regeln definieren, wie eine Animation in prozentbasierten Schritten (0% bis 100%) aussieht, und die Kurzform-Eigenschaft animation (oder ihre Longhand-Geschwister animation-duration, animation-delay, animation-timing-function, animation-iteration-count, animation-fill-mode) sagt dem Browser, wie diese Keyframes-Definition abzuspielen ist. Der Browser behandelt alle Interpolation, Glättung und Frame-Timing in C++, typischerweise GPU-beschleunigt für Transform- und Opacity-Änderungen.

Animationen unterscheiden sich von CSS-Übergängen auf zwei Arten. Übergänge feuern, wenn sich der Zustand eines Elements ändert (ein Hover, ein Klassenwechsel, ein Fokus-Event) und interpolieren zwischen genau zwei Werten: dem alten und dem neuen. Animationen laufen unabhängig vom Zustand, folgen einer beliebigen Anzahl von Keyframe-Schritten, können unendlich loopen, können rückwärts abgespielt werden, und können über CSS oder JavaScript ausgelöst, pausiert und fortgesetzt werden. Übergänge sind das richtige Werkzeug für «in einer halben Sekunde von A zu B springen»; Animationen sind das richtige Werkzeug für «diesen aufmerksamkeitsstarken Puls für immer loopen» oder «diese Eingangssequenz einmal abspielen, wenn das Element erscheint».

Für modernes Webdesign ersetzen CSS-Animationen eine riesige Menge dessen, was früher JavaScript-Bibliotheken erforderte. Spinner, Fade-Ins, Slide-Ups, Aufmerksamkeitspulse, Erfolgshaken: alle sind jetzt Standard-CSS-Muster. Der Kompromiss ist Ausdruckskraft für komplexe Sequenzen. CSS-Animationen können viel, sind aber bei etwa 5 bis 7 Keyframe-Schritten mit synchronisierten Eigenschaftsänderungen nicht mehr bequem; für storyboardte Animationen, scroll-verknüpfte Sequenzen oder alles Dynamische, das von JavaScript-Status abhängt, bleiben dedizierte Bibliotheken (GSAP, Framer Motion, Web Animations API) die bessere Wahl.

Wie dieses Tool hinter den Kulissen funktioniert

Wenn Sie eine Voreinstellung (z. B. «bounce» oder «fade-in») wählen, lädt das Tool eine vordefinierte @keyframes-Zeichenfolge in den Vorschaubereich und wendet die Animation-Eigenschaft auf die Vorschaubox an. Die Keyframes sind echtes CSS, kein benutzerdefiniertes Format: was Sie sehen, ist was Sie zum Kopieren erhalten. Schieberegler aktualisieren Animation-Timing-Werte (Dauer, Verzögerung, Iterationsanzahl), indem sie die inline animation-Eigenschaft in Echtzeit bearbeiten, sodass die Vorschau jede Änderung sofort widerspiegelt, ohne die Seite neu zu laden.

Die Auswahl der Easing-Funktion verwendet die standardmäßigen CSS-Timing-Function-Werte: linear (konstante Geschwindigkeit), ease (Standard, langsamer Start und Ende), ease-in (langsamer Start), ease-out (langsames Ende), ease-in-out (langsamer Start und Ende) oder cubic-bezier(x1, y1, x2, y2) für benutzerdefinierte Kurven. Die sichtbare Animationskurve wird durch die native Timing-Function-Implementierung des Browsers berechnet; die Vorschau ist die tatsächliche browser-gerenderte Ausgabe, keine JavaScript-Simulation.

Das Code-Feld zeigt das vollständige CSS, das Sie in ein Stylesheet einfügen müssen: sowohl den @keyframes-Block als auch die .ihre-klasse { animation: ... }-Deklaration. Klicken Sie auf «CSS kopieren» und beide werden als einzelner Textblock in Ihre Zwischenablage geschrieben. Keine Datei wird generiert, kein Server verarbeitet etwas, und das Tool hat kein Backend zum Aufrufen. Die Vorschau, die Code-Generierung und das Schreiben in die Zwischenablage geschehen alle in JavaScript auf Ihrem Gerät. Aktualisieren Sie die Seite und Ihre benutzerdefinierte Konfiguration ist weg, es sei denn, Sie haben sie zuerst kopiert.

Kurze Geschichte der Web-Animation

Reale Arbeitsabläufe

Häufige Fallstricke und was sie bedeuten

Datenschutz: alles läuft in Ihrem Browser

CSS-Generator-Tools kommen in zwei Geschmacksrichtungen: einfache HTML-Seiten mit clientseitigem JavaScript (privat, schnell) und Cloud-Editoren, die Ihre Projekte speichern (kollaborativ aber mit Datenschutz-Kompromissen). Dieses Tool ist die erste Art. Ihre Schieberegler-Werte, Ihre ausgewählte Voreinstellung, Ihr generiertes CSS: alles bleibt in Ihrer Browser-Sitzung. Aktualisieren Sie die Seite und der Zustand ist weg, es sei denn, Sie haben zuerst das CSS kopiert. Kein Server speichert Ihre Animationswahl, keine Analyse verfolgt, welche Voreinstellungen Sie getestet haben, und kein Konto wird benötigt.

Die Datenschutzeigenschaft zählt vor allem für proprietäre Designarbeit. Ein Studio, das Animationen für ein vertrauliches Kundenprojekt prototypisiert, ein Entwickler, der an den Mikrointeraktionen einer nicht angekündigten App arbeitet, oder ein Designer, der eine Markenkampagne iteriert: jeder Kontext, in dem die Iterationshistorie oder das laufende Design Informationen über die Arbeit verraten könnte. Mit diesem Tool wird nichts erfasst, weil nichts gesendet wird. Öffnen Sie den Netzwerk-Tab des Browsers und Sie werden während der Nutzung null ausgehende Anfragen sehen; nur das erste Seitenladen holt das HTML und JavaScript.

Wann ein anderes Tool die richtige Wahl ist

Weitere häufig gestellte Fragen

Wie lasse ich eine Animation nur einmal abspielen?

Setzen Sie animation-iteration-count: 1 (was der Standard ist, wenn nicht angegeben). Um das Element nach Abschluss der Animation im Endzustand der Animation zu halten (statt zum ursprünglichen Stil zurückzuschnappen), setzen Sie auch animation-fill-mode: forwards. Die kombinierte Kurzform ist animation: fadeIn 0.5s ease-out forwards;.

Kann ich eine Animation pausieren und fortsetzen?

Ja, mit animation-play-state: paused (oder running). Schalten Sie diese Eigenschaft via JavaScript um (z. B. bei einem Button-Klick) oder in CSS via :hover für «pause beim Hovern»-Muster. Die Animation friert an ihrem aktuellen Punkt ein und wird von dort fortgesetzt, wenn sie wieder auf running gesetzt wird, kein Fortschrittsverlust. Dies funktioniert in Übergängen gleich, aber nur die animation-play-state-Eigenschaft existiert für die Laufzeit-Pause-Kontrolle.

Wie löse ich eine Animation bei Klick oder Scroll aus?

Für Klick-Trigger schalten Sie eine CSS-Klasse via JavaScript um: element.classList.toggle('animate-in'). Die Animation läuft, wenn die Klasse hinzugefügt wird. Für Scroll-Trigger verwenden Sie IntersectionObserver, um zu erkennen, wann das Element in den Viewport eintritt, und fügen die Klasse dann hinzu. Für moderne Browser lassen Sie CSS Scroll-driven Animations den Animationsfortschritt direkt an die Scroll-Position binden, ohne JavaScript, via animation-timeline: scroll().

Warum flackert oder stottert meine Animation?

Die meisten Flacker-/Stotter-Probleme kommen vom Animieren von layout-auslösenden Eigenschaften (width, height, top/left) statt transform-basierter Äquivalente. Wechseln Sie left: 0 zu transform: translateX(0) und die Animation sollte glätten. Andere Ursachen: Overdraw von vielen halbtransparenten Schichten, Layout-Thrashing durch JavaScript, das Stile im selben Frame liest und schreibt, oder übermäßige Schatten und Filter auf dem animierten Element.

Sollte ich Animationen auf barrierefreiheits-kritischen Schnittstellen verwenden?

Verwenden Sie sie, aber respektieren Sie prefers-reduced-motion. Die WCAG 2.1-Richtlinien empfehlen die Option, nicht-essenzielle Bewegung zu deaktivieren. Wickeln Sie dekorative Animationen in @media (prefers-reduced-motion: no-preference) ein, damit Benutzer, die die OS-Präferenz setzen, eine statische Erfahrung erhalten. Wesentliche Feedback-Animationen (Ladeanzeigen, Fehler-Shakes) können bleiben; rein dekorative sollten für sensible Benutzer opt-in sein.

Kann ich cubic-bezier für benutzerdefinierte Easing-Kurven verwenden?

Ja. Die cubic-bezier(x1, y1, x2, y2)-Timing-Funktion lässt Sie jede Easing-Kurve mit zwei Kontrollpunkten definieren. Jeder x-Wert liegt zwischen 0 und 1 (Zeit darstellend), y-Werte können negativ oder größer als 1 sein (Overshoot- und Bounce-Effekte erlauben). Verwenden Sie unser Cubic-Bezier-Tool oder Lea Verous klassisches cubic-bezier.com, um eine Kurve visuell auszuwählen. Übliche Voreinstellungs-Alternativen: ease, ease-in, ease-out, ease-in-out und die linear-aliased CSS-Variablen cubic-bezier(0.25, 0.1, 0.25, 1) (Standard ease).

Verwandte Tools

CSS-Verlaufsgenerator CSS Kubischer Bezier-Generator CSS-Ladeanimation-Generator CSS Flexbox-Generator