jquery.app
Deutsch
EnglishDeutschFrancaisEspanol日本語Nederlands

CSS-Tools

Kostenlose CSS Animation Keyframes Generator

Generieren Sie gebrauchsfertige CSS @keyframes-Animationen mit neun voreingestellten Bewegungsmustern. Wählen Sie aus fade, slide, scale, spin, pulse, bounce und shake und passen Sie dann Dauer, Beschleunigung, Verzögerung, Iterationsanzahl, Richtung und Füllmodus an. Das Tool gibt eine vollständige @keyframes-Regel mit der animation shorthand-Property aus.

Tool wird geladen...

Was ist CSS Animation Keyframes Generator?

Der CSS Animation Keyframes Generator erstellt vollständige CSS @keyframes-Regeln und animation shorthand-Properties aus voreingestellten Bewegungsmustern. CSS-Animationen ermöglichen es, Elementeigenschaften über die Zeit ohne JavaScript zu animieren.

Kurze Antwort

Wählen Sie aus neun Animations-Voreinstellungen und passen Sie Dauer, Beschleunigung, Verzögerung, Iterationsanzahl, Richtung und Füllmodus an. Erhalten Sie eine vollständige @keyframes-Regel plus die animation shorthand CSS.

Last updated: 2026-06-11

Einschränkungen

  • Die @keyframes-Regel verwendet from/to-Syntax. Benutzerdefinierte Keyframe-Prozentsätze müssen manuell hinzugefügt werden.
  • Das Tool generiert eine einzelne Animation auf einmal. Für mehrere gleichzeitige Animationen kombinieren Sie sie manuell.
  • Die Live-Vorschau verwendet ein statisches Element. Testen Sie browserübergreifend vor der Bereitstellung.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

So nutzt du dieses Tool

  1. Wählen Sie eine Animations-Voreinstellung aus dem Dropdown: Fade In/Out, Slide Down/Up, Scale In, Spin, Pulse, Bounce oder Shake.
  2. Passen Sie die Animationsparameter an: Dauer in Sekunden, Beschleunigungsfunktion, Verzögerung, Iterationsanzahl (1, 2, 3 oder unendlich), Richtung und Füllmodus.
  3. Bearbeiten Sie ggf. den Animationsnamen, um ihn an Ihre CSS-Namenskonventionen anzupassen.
  4. Beobachten Sie die Live-Vorschau. Klicken Sie auf den Wiederholungs-Button, um die Animation neu zu starten.
  5. Kopieren Sie die vollständige Ausgabe – @keyframes-Regel plus .element-Selektor – in Ihr Stylesheet.

Wofür du es nutzen kannst

  • Generieren Sie eine Fade-In-Animation für ein Modal mit fadeIn, ease-out und fill-mode forwards.
  • Erstellen Sie eine kontinuierliche Spin-Animation für einen Lade-Spinner mit linearer Beschleunigung und unendlicher Iteration.
  • Erstellen Sie eine Pulse-Animation für einen Call-to-Action-Button mit der Pulse-Voreinstellung.

Anwendungsfalle

Praxisbeispiele

Beispiel

Toast-Benachrichtigungs-Einblendanimation

Ein Entwickler wählt Slide Down, setzt die Dauer auf 0,4s mit ease-out und fill-mode forwards. Das @keyframes schiebt den Toast von translateY(-20px) in seine natürliche Position.

Beispiel

Dashboard-Lade-Spinner

Ein UI-Designer wählt Spin, setzt die Dauer auf 1,2s mit linearer Beschleunigung und unendlicher Iteration. Die Ausgabe erzeugt eine kontinuierliche Rotation für ein SVG-Symbol.

Haufige Fehler

  • animation statt transition für einfache Hover-Effekte verwenden – transition ist einfacher und leistungsfähiger.
  • Eine lange Verzögerung ohne fill-mode: backwards setzen – das Element zeigt während der Verzögerung seinen Standardstil.
  • Vergessen, die Animationsleistung auf mobilen Geräten zu testen – transform und opacity sind GPU-beschleunigt, width/height/box-shadow nicht.

Überprüfung

  1. Wählen Sie die Fade-In-Voreinstellung. Überprüfen Sie die @keyframes fadeIn-Regel mit from { opacity: 0 } to { opacity: 1 }.
  2. Wählen Sie Spin mit infinite. Überprüfen Sie animation: spin 1.5s linear 0s infinite normal.

FAQ

Fragen zu CSS Animation Keyframes Generator

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

ease startet langsam, wird schneller und verlangsamt sich. ease-in startet langsam und beschleunigt. ease-out startet schnell und verlangsamt. linear bleibt konstant.

Wann sollte ich animation-fill-mode: forwards verwenden?

Verwenden Sie forwards, wenn das animierte Element nach Ende der Animation seinen letzten Keyframe-Zustand behalten soll. Bei sich wiederholenden Animationen ist fill mode normalerweise unnötig.

Kann ich mehrere Animationen auf demselben Element kombinieren?

Ja, CSS unterstützt mehrere kommagetrennte Animationen auf einem Element. Kombinieren Sie sie manuell nach der Generierung.

Verwandte Tools

Weitere css-tools

Css

CSS Carousel Generator

Generate native CSS carousel markup with scroll-snap, scroll buttons, scroll markers, and accessible list structure. No JavaScript required.

Tool öffnen

Auch ausprobieren

Auch ausprobieren