CSS-Animationsgenerator
CSS Animation Generator ist ein kostenloses Online-Tool, mit dem Sie flüssige, auffällige CSS-Animationen erstellen können, ohne Keyframes manuell schreiben zu müssen. Wählen Sie aus vorgefertigten Animationseffekten wie Fade, Slide, Bounce, Rotate, Flip, Zoom und mehr. Passen Sie Dauer, Verzögerung, Timing-Funktion, Iterationsanzahl, Richtung und Füllmodus mithilfe intuitiver Steuerelemente an. Zeigen Sie Ihre Animation in Echtzeit in einem Live-Element in der Vorschau an und kopieren Sie dann den generierten CSS-Code einschließlich @Keyframes und aller Herstellerpräfixe. Perfekt für Entwickler und Designer, die ihren Websites ohne tiefgreifende CSS-Animationskenntnisse Bewegung hinzufügen möchten.
Was ist
CSS-Animationen ermöglichen es Ihnen, fließende Übergänge und komplexe Bewegungseffekte auf Webelementen rein durch CSS zu erzeugen — kein JavaScript erforderlich (für einfache Animationen). Das CSS-Animationssystem basiert auf zwei Kernkonzepten: Übergänge (einfache Zustandsänderungen) und Keyframes (mehrstufige Animationssequenzen). Die Kurzschrift der CSS-Animationseigenschaft enthält: - animationsname: Der Name der @keyframes-Regel - animationsdauer: Wie lange ein Zyklus dauert (z.B. 1s, 500ms) - Animationsverzögerung: Wartezeit, bevor die Animation startet - animation-timing-Funktion: Die Geschwindigkeitskurve (Leichtigkeit, linear, Leichtigkeit-in, Leichtigkeit-out, Leichtigkeit-in-out, kubisch-bezier) - animation-Iteration-Anzahl: Wie oft wiederholt werden soll (Anzahl oder unendlich) - Animationsrichtung: normal, rückwärts, abwechselnd, abwechselnd-rückwärts - Animationsfüllmodus: Welche Stile werden vorher / nachher angewendet (keine, vorwärts, rückwärts, beide) - animations-Wiedergabestatus: läuft oder pausiert Die @keyframes-Regel definiert die Animationsstufen: ```CSS @keyframes einblenden { von { Deckkraft: 0; } bis { Deckkraft: 1; } } ``` Vorgefertigte Animationskategorien umfassen: - Animationen einblenden: Einblenden, Einblenden, einbLeNden, einbLeNden, einbLeNden, Einblenden, Ausblenden - Folienanimationen: slideInUp, slideInDown, slideInLeft, slideInRight - Bounce-Animationen: bounceIn, bounceInUp, bounceInDown, bounceOut - Animationen drehen: rotateIn, rotateInUpLeft, rotateInUpRight, rotateOut - Zoom-Animationen: Vergrößern, Verkleinern, Verkleinern, Verkleinern - Spezielle Animationen: Scharnier, rollIn, rollOut, Blitz, Puls, Schütteln, Schwingen, Tada Timing-Funktionen erklärt: - leichtigkeit: Langsamer Start, schnelle Mitte, langsames Ende (Standard) - linear: Durchgehend konstante Geschwindigkeit - ease-in: Langsamer Start, beschleunigen - ease-out: Schnelles Anfahren, Abbremsen - ease-in-out: Langsamer Anfang und Ende, schnelle Mitte - kubisch-bezier (x1, y1, x2, y2): Benutzerdefinierte Timing-Kurve Der Generator gibt sauberes, browserübergreifendes CSS mit allen notwendigen Herstellerpräfixen (-webkit-, -moz-, -o-) und einem Fallback für ältere Browser aus.
Wie zu verwenden
- Wählen Sie einen Animationseffekt aus der Galerie aus. Durchsuchen Sie Kategorien wie Fade, Slide, Bounce, Rotate, Zoom und Spezialeffekte. Klicken Sie auf eine beliebige Animations-Miniaturansicht, um eine Vorschau auf dem Demo-Element anzuzeigen.
- Passen Sie die Animationsdauer mit dem Schieberegler oder Eingabefeld an. Typische Werte liegen zwischen 200 ms (schnelles Feedback) und 2-3 Sekunden (dramatische Effekte). Kürzere Dauern wirken für UI-Interaktionen reaktionsschneller.
- Legen Sie eine Verzögerung fest, wenn die Animation nach einer Pause starten soll. Nützlich zum Sequenzieren mehrerer Animationen (z. B. Header nach 500ms einblenden, dann Inhalt nach 800ms einschieben).
- Wählen Sie eine Timing-Funktion aus dem Dropdown-Menü. Versuchen Sie 'ease-out' für Eingangsanimationen (schnelle Ankunft, sanfter Stopp) und 'ease-in' für Ausgangsanimationen. Verwenden Sie 'linear'} für kontinuierliche Drehungen. Erstellen Sie benutzerdefinierte Cubic-Bezier-Kurven mit dem Kurveneditor.
- Konfigurieren Sie die Iterationsanzahl (wie oft die Animation abgespielt wird) und die Richtung (normal, rückwärts, abwechselnd für Hin- und Her-Effekte). Setzen Sie 'infinite' für kontinuierliche Animationen wie Lade-Spinner.
- Sehen Sie sich die Animation in Echtzeit an, indem Sie auf die Schaltfläche 'Play' klicken. Das Demo-Element führt Ihre konfigurierte Animation aus. Klicken Sie auf 'Pause', um den aktuellen Zustand einzufrieren, oder auf 'Replay', um neu zu starten.
- Kopieren Sie den generierten CSS-Code aus dem Ausgabefenster. Der Code enthält die @keyframes-Definition, die Animation-Kurzschreibweise und einzelne Langschreibweise-Eigenschaften. Fügen Sie ihn in Ihr Stylesheet ein oder verwenden Sie Inline-Stile.
Beispiele
Eingabe: Type: Fade In, Duration: 1s, Easing: ease-in-out
Prozess: Keyframes 0%:opacity=0, 100%:opacity=1 → CSS output
Ergebnis: @keyframes fadeIn { 0%{opacity:0} 100%{opacity=1} }
Eingabe: Type: Slide From Left, Duration: 500ms
Prozess: translateX(-100%) to translateX(0)
Ergebnis: @keyframes slideLeft { 0%{transform:translateX(-100%)} 100%{transform:translateX(0)} }
Verwandte Suchen
Leute suchen auch nach: CSS-Animationsgenerator, CSS-Schlüsselbilder, CSS-Animationen, animationsgenerator.
CSS-AnimationsgeneratorCSS-SchlüsselbilderCSS-Animationenanimationsgenerator
Häufig gestellte Fragen
Was ist der Unterschied zwischen CSS-Animationen und CSS-Übergängen?
CSS-Übergänge animieren zwischen zwei Zuständen (z. B. Hover-Zustandsänderung) und benötigen einen Auslöser wie :hover oder Klassenänderungen. CSS-Animationen verwenden @keyframes, um mehrere Zwischenzustände zu definieren, und können automatisch beim Laden der Seite ablaufen, unendlich wiederholt werden oder rückwärts abgespielt werden. Verwenden Sie Übergänge für einfache Hover-/Klick-Effekte und Animationen für komplexe, mehrstufige oder automatisch abspielende Bewegungen. Beide können kombiniert werden: Verwenden Sie Übergänge für Hover-Zustände und Animationen für Eingangseffekte.
Wie löse ich eine Animation beim Laden der Seite aus?
Fügen Sie einfach die animation-Eigenschaft zum CSS des Elements hinzu. Sie wird automatisch abgespielt, wenn das Element gerendert wird: .my-element { animation: fadeIn 1s ease-out; }. Wenn die Animation zunächst pausiert und später über JavaScript ausgelöst werden soll, setzen Sie animation-play-state: paused als Standard und wechseln Sie bei Bedarf zu running (z. B. beim Scrollen in den sichtbaren Bereich, bei Benutzerinteraktion oder nach einem Timer).
Kann ich mehrere Animationen auf einem Element kombinieren?
Ja. Wenden Sie mehrere Animationen mit einer durch Kommas getrennten Liste an: animation: fadeIn 1s, slideInUp 1s; Jede Animation kann ihre eigene Dauer, Verzögerung und Timing-Funktion haben. Dies ermöglicht komplexe kombinierte Effekte wie gleichzeitiges Einblenden und Hochschieben. Achten Sie auf die Leistung – zu viele gleichzeitige Animationen können auf mobilen Geräten zu Rucklern führen.
Warum ist meine Animation nicht flüssig? Sie sieht ruckelig aus.
Für flüssige 60fps-Animationen sollten Sie nur Eigenschaften animieren, die GPU-beschleunigt werden können: transform (translate, scale, rotate, skew) und opacity. Vermeiden Sie das Animieren von width, height, top, left, margin oder padding – diese lösen eine Layout-Neuberechnung (Reflow) aus, die rechenintensiv ist. Wenn Sie Ruckler sehen, fügen Sie will-change: transform; zum animierten Element hinzu, um dem Browser einen Hinweis zur Optimierung zu geben. Reduzieren Sie auch die Anzahl der gleichzeitig auf dem Bildschirm animierten Elemente.
Sind CSS-Animationen barrierefrei?
Manche Benutzer reagieren empfindlich auf Bewegungen und bevorzugen reduzierte Animationen. Respektieren Sie dies, indem Sie die prefers-reduced-motion Media Query abfragen: @media (prefers-reduced-motion: reduce) { * { animation: none !important; } }. Benutzer mit Gleichgewichtsstörungen können durch Parallax-Effekte, Zoom- oder Drehanimationen Unbehagen verspüren. Bieten Sie stets eine Möglichkeit, Animationen zu deaktivieren oder zu minimieren, und vermeiden Sie automatisch ablaufende lange Animationen ohne Benutzerkontrolle.