CSS-Animationsgenerator
CSS-Keyframe-Animationen mit einem visuellen Zeitleisteneditor erstellen
Animationseinstellungen
Animationsvorlagen
Schlüsselbilder
0% → 100%
Schlüsselbild · 0%
Schlüsselbild · 100%
Live-Vorschau
Generiertes CSS
@keyframes myAnimation {
0% {
opacity: 1;
}
100% {
opacity: 1;
}
}
.animated-element {
animation-name: myAnimation;
animation-duration: 1s;
animation-timing-function: ease;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: none;
animation-delay: 0s;
}Bearbeiten Sie die Schlüsselbilder und spielen Sie die Animation erneut ab, um sie zu prüfen.
Kurze Transformationsbeispiele
translateX(100px) / translateY(-50px)rotate(45deg) / rotate(360deg)scale(1.5) / scale(0.5)(skewX(10deg) / skewY(-5deg))(perspective(400px) rotateY(180deg))Über den CSS-Animationsgenerator
Mit unserem kostenlosen CSS-Animationsgenerator bauen Sie professionelle Keyframe-Animationen visuell, ohne komplexen Code von Grund auf zu schreiben. Konfigurieren Sie jeden Aspekt Ihrer Animation, von Dauer und Timing-Funktionen bis zu einzelnen Keyframe-Eigenschaften, und sehen Sie das Ergebnis sofort in einer Live-Vorschau, die sich in Echtzeit aktualisiert.
Ob dezenter Einblendeffekt, auffälliges Springen oder eine eigene mehrstufige Animation: Dieses Tool bietet 10 eingebaute Vorlagen und einen vollständigen Keyframe-Editor. Jede Vorlage lässt sich vollständig anpassen, sodass Sie sie als Ausgangspunkt nutzen und jede Eigenschaft, darunter transform, opacity und Hintergrundfarbe, bei jedem beliebigen Prozentwert feinjustieren können.
Der Generator gibt sauberen, produktionsreifen CSS-Code mit korrekter @keyframes-Syntax und einzelnen Animationseigenschaften aus. Kopieren Sie den erzeugten Code einfach und fügen Sie ihn in Ihr Stylesheet ein. Die gesamte Verarbeitung geschieht in Ihrem Browser ohne Server-Uploads, Ihre Arbeit bleibt privat und sicher.
Hauptfunktionen
- Visueller Keyframe-Editor mit Steuerung für transform, opacity und background-color pro Keyframe
- 10 vorgefertigte Animationsvorlagen: Bounce, Fade In, Fade Out, Slide In Left, Slide In Right, Spin, Pulse, Shake, Flip und Zoom In
- Live-Vorschau mit sofortiger Wiederholung zum Testen der Animationen
- Vollständige Steuerung der Animationseigenschaften, darunter Dauer, Timing-Funktion, Anzahl der Wiederholungen, Richtung, Fill-Mode und Verzögerung
- Eigene cubic-bezier-Timing-Funktionen für präzise Beschleunigungskurven
- Keyframes bei jedem Prozentwert hinzufügen und entfernen (0%, 25%, 50%, 75%, 100% oder frei wählbar)
- Sauberer CSS-Code mit @keyframes und einzelnen Animationseigenschaften, bereit für den Produktiveinsatz
- Kopieren in die Zwischenablage per Klick für die sofortige Übernahme in Ihre Projekte
- Eigene Animationsnamen für geordneten, aussagekräftigen Code
- Vollständige Unterstützung des Dunkelmodus für angenehmes Arbeiten in jeder Umgebung
So verwenden Sie den CSS-Animationsgenerator
- Ausgangspunkt wählen: Wählen Sie eine der 10 eingebauten Vorlagen wie Bounce, Fade In oder Spin oder starten Sie mit einer leeren Animation.
- Animationseigenschaften anpassen: Stellen Sie Dauer, Timing-Funktion, Anzahl der Wiederholungen, Richtung, Fill-Mode und Verzögerung mit den übersichtlichen Bedienelementen ein.
- Keyframes bearbeiten: Fügen Sie Keyframes bei jedem Prozentwert hinzu, entfernen oder ändern Sie sie. Legen Sie für jeden Keyframe transform-Werte, Deckkraft und Hintergrundfarben fest.
- Animation ansehen: Verfolgen Sie die Live-Vorschau in Echtzeit. Klicken Sie auf „Wiederholen“, um die Animation neu zu starten und das Ergebnis zu prüfen.
- CSS-Code kopieren: Klicken Sie auf „CSS kopieren“, um die erzeugten @keyframes und den Code der Animationseigenschaften in die Zwischenablage zu kopieren.
- In Ihr Projekt einfügen: Fügen Sie das kopierte CSS in Ihr Stylesheet ein und weisen Sie Ihren HTML-Elementen die Animationsklasse zu.
Anwendungsfälle
- Mikrointeraktionen: Fügen Sie dezente Hover-Effekte, Schaltflächenanimationen und Rückmeldungen hinzu, um die Nutzerbindung zu verbessern.
- Ladeanzeigen: Erstellen Sie eigene Spinner, Pulseffekte und Skeleton-Screen-Animationen für Ladezustände.
- Seitenübergänge: Bauen Sie Slide-in-, Fade-in- und Zoom-Effekte für Seitenelemente, die beim Scrollen oder Laden animiert werden.
- Aufmerksamkeitsgeber: Entwerfen Sie Shake-, Bounce- und Pulse-Animationen, die die Aufmerksamkeit auf wichtige UI-Elemente lenken.
- Prototypen für Designsysteme: Erstellen Sie schnell Prototypen und vereinheitlichen Sie Animationsmuster in der Komponentenbibliothek Ihres Teams.
- CSS-Animationen lernen: Experimentieren Sie in einer visuellen Umgebung mit Keyframes, Timing-Funktionen und Animationseigenschaften.
- Präsentationseffekte: Erstellen Sie animierte Elemente für webbasierte Präsentationen und Portfolios.
Häufig gestellte Fragen
Ist dieses Tool kostenlos?
Ja, der CSS-Animationsgenerator ist völlig kostenlos und ohne Nutzungsgrenzen. Sie können beliebig viele Animationen erstellen, alle Vorlagen nutzen und den erzeugten CSS-Code ohne Einschränkungen kopieren.
Sind meine Daten sicher?
Die gesamte Erzeugung und Vorschau der Animationen findet vollständig in Ihrem Browser statt. Es werden keine Daten an einen Server gesendet, Ihre Animationseinstellungen und Ihr CSS-Code bleiben daher komplett privat.
Welche Browser unterstützen CSS-Animationen?
CSS-Animationen werden von allen modernen Browsern unterstützt, darunter Chrome, Firefox, Safari, Edge und Opera. Der erzeugte Code verwendet die Standardsyntax @keyframes, die in allen aktuellen Browserversionen funktioniert.
Kann ich mehrere Animationen auf einem Element kombinieren?
Ja, Sie können mehrere Animationen auf ein einzelnes Element anwenden, indem Sie die Animationsnamen in CSS durch Kommas trennen. Erzeugen Sie jede Animation einzeln und kombinieren Sie sie in Ihrem Stylesheet.
Was ist eine cubic-bezier-Timing-Funktion?
Eine cubic-bezier-Funktion definiert eine eigene Beschleunigungskurve für Ihre Animation. Mit vier Werten steuert sie, wie die Animation schneller und langsamer wird, und bietet damit mehr Kontrolle als Standardoptionen wie ease-in oder ease-out.
Tipps und bewährte Vorgehensweisen
- transform und opacity verwenden: Animieren Sie die Eigenschaften transform und opacity für die beste Performance, da sie per GPU hardwarebeschleunigt werden können.
- Animationen dezent halten: Dezente Animationen (0,2 s-0,5 s) wirken bei den meisten UI-Interaktionen hochwertiger als lange, dramatische.
- Nutzereinstellungen respektieren: Verwenden Sie die Media Query prefers-reduced-motion, um Animationen für Nutzer, die weniger Bewegung bevorzugen, zu deaktivieren oder zu reduzieren.
- Passende Fill-Modes wählen: Nutzen Sie „forwards“, um den Endzustand zu behalten, „backwards“, um den ersten Keyframe während der Verzögerung anzuwenden, oder „both“ für vollständige Kontrolle.
- Geräteübergreifend testen: Prüfen Sie Ihre Animationen auf Mobilgeräten, wo die Performance von Desktop-Browsern abweichen kann.