Animation-Keyframe-Generator

Erstelle CSS-@keyframes-Animationen visuell mit unserem interaktiven Keyframe-Generator. Füge mehrere Keyframe-Stopps hinzu, setze Opazität, Position, Rotation, Skalierung und Farbe pro Stopp - und sieh dir die Animation dann in der Vorschau an und kopiere das CSS.

Animation Keyframe Generator

Build CSS @keyframes animations visually. Add keyframe stops, set opacity, transform, and color properties per stop, then preview the animation and copy the CSS.

Preview

Box

Settings

Duration2.0s

Easing

Iterations

infinite

Keyframe Stops (5)

Opacity

1.00

Move X

0px

Move Y

0px

Rotate

0°

Scale

1.0

Color

25%

Opacity

0.80

Move X

50px

Move Y

-20px

Rotate

45°

Scale

1.2

Color

50%

Opacity

1.00

Move X

100px

Move Y

0px

Rotate

90°

Scale

1.0

Color

75%

Opacity

0.80

Move X

50px

Move Y

20px

Rotate

45°

Scale

1.2

Color

100%

Opacity

1.00

Move X

0px

Move Y

0px

Rotate

0°

Scale

1.0

Color

CSS Output

@keyframes anim-qih1 {
  0% {
  opacity: 1;
  background-color: #6366f1;
  }

  25% {
  opacity: 0.8;
  transform: translate(50px, -20px) rotate(45deg) scale(1.2);
  background-color: #8b5cf6;
  }

  50% {
  opacity: 1;
  transform: translate(100px, 0px) rotate(90deg);
  background-color: #a855f7;
  }

  75% {
  opacity: 0.8;
  transform: translate(50px, 20px) rotate(45deg) scale(1.2);
  background-color: #d946ef;
  }

  100% {
  opacity: 1;
  background-color: #6366f1;
  }
}

.element {
  animation: anim-qih1 2s ease-in-out infinite;
  /* Add your element styles here */
}

Warum unseren Animation-Keyframe-Generator nutzen?

Visueller Keyframe-Builder: Füge Keyframe-Stopps an beliebigen Prozentpunkten (0 %-100 %) mit einer intuitiven visuellen Oberfläche hinzu und ordne sie. Jeder Stopp unterstützt Opazität, translate (X/Y), rotate, scale und background-color - alles über Regler und Farbwähler einstellbar.
Animation-Vorschau in Echtzeit: Sieh deine Animation mit einem Live-Vorschaubereich, der die Keyframes in Echtzeit abspielt, zum Leben erwachen. Passe Dauer, Easing und Wiederholungen sofort an - die Vorschau aktualisiert sich ohne Seitenneuladen.
Saubere CSS-@keyframes-Ausgabe: Erhalte korrekt formatierte @keyframes-Regeln mit allen deinen Animationseigenschaften. Der Generator gibt nur tatsächlich verwendete Eigenschaften aus - keine unnötigen Deklarationen. Kopiere das komplette Animations-CSS mit einem Klick.
100 % privat und kostenlos: Die gesamte Animationserzeugung und Vorschau-Rendering findet lokal im Browser statt. Keine Daten werden an einen Server gesendet, keine Registrierung nötig und keine Nutzungslimits. Nutze es für jedes Projekt - privat, kommerziell oder für Kunden.

Häufige Anwendungsfälle des Animation-Keyframe-Generators

Landing-Page-Animationen: Erstelle ansprechende Eingangsanimationen für Hero-Bereiche, Call-to-Action-Buttons und Feature-Karten. Nutze Fade-in-, Slide-up- oder Scale-Effekte, um Aufmerksamkeit auf Schlüsselelemente zu lenken und das Engagement zu erhöhen.
Lade- und Fortschrittsindikatoren: Entwirf eigene Ladeanimationen, Fortschrittsindikatoren und Skeleton-Screen-Effekte. Keyframe-Animationen sind perfekt für auffällige Ladezustände, die Nutzer bei der Stange halten, während Inhalte laden.
Mikrointeraktionen und Feedback: Füge UI-Elementen wie Buttons, Toggles und Formularfeldern subtiles Bewegungsfeedback hinzu. Ein kurzer Bounce oder Farbübergang bei Hover oder Klick liefert zufriedenstellendes visuelles Feedback.
Navigation im Stil mobiler Apps: Implementiere Navigationstransitionen im mobilen Stil wie Slide-in-Menüs, Bottom-Sheet-Reveals und Tab-Bar-Animationen. Keyframe-Animationen lassen mobile Weberlebnisse nativ und poliert wirken.
Animationen für E-Mail-Newsletter: Erstelle CSS-Animationen für Newsletter, die in unterstützenden E-Mail-Clients funktionieren. Einfache Opazitäts- und Transformationsanimationen können deine Kampagnen in vollen Postfächern hervorheben.
Design-Prototyping und Tests: Prototype Animationideen in der Designphase schnell, ohne Code zu schreiben. Experimentiere mit Timing, Easing und Eigenschaftskombinationen, um die perfekte Bewegung für dein Designsystem zu finden.

Was sind CSS-@keyframes-Animationen?

CSS @keyframes ist eine leistungsstarke CSS-At-Rule, mit der du komplexe Animationen definieren kannst, indem du Eigenschaftswerte an verschiedenen Punkten (Keyframes) entlang einer Zeitachse festlegst. Anders als CSS-Transitions, die nur zwischen zwei Zuständen (Start und Ende) animieren, können Keyframe-Animationen mehrere Zwischenzustände haben und so anspruchsvolle Bewegungsabläufe wie Bounces, Farbzyklen und mehrstufige Transformationen ermöglichen.

Jeder Keyframe-Stopp wird als Prozentsatz der gesamten Animationsdauer definiert, von 0 % (Beginn) bis 100 % (Ende). An jedem Stopp legst du die CSS-Eigenschaftswerte fest, die das animierte Element an diesem Punkt haben soll. Der Browser interpoliert (gleicht) die Werte zwischen den Stopps automatisch aus und erzeugt so flüssige Bewegung. Du kannst die Timing-Funktion pro Animation oder pro Keyframe steuern, um das Easing-Verhalten präzise zu kontrollieren.

So funktioniert unser Animation-Keyframe-Generator

Unser Generator bietet eine visuelle Oberfläche zum Erstellen von @keyframes-Animationen, ohne CSS von Hand zu schreiben. So funktioniert es:

Keyframe-Stopps hinzufügen: Beginne mit den Standardstopps oder wähle eine voreingestellte Animation (Fade In, Slide In, Bounce, Spin & Scale, Color Cycle, Wobble). Jeder Stopp steht für einen Punkt in der Animationszeitachse. Du kannst bis zu 10 Stopps hinzufügen und ihre Positionen mit dem Prozentregler anpassen.
Eigenschaften pro Stopp konfigurieren: Stelle für jeden Keyframe-Stopp Opazität, horizontale und vertikale Position (translate), Rotation, Skalierung und Hintergrundfarbe über Regler und Farbwähler ein. Das animierte Vorschau-Element aktualisiert sich in Echtzeit.
Animationsparameter festlegen: Nutze den Dauerregler (0,1 s bis 10 s) für die Geschwindigkeit, wähle eine Easing-Funktion (Linear, Ease, Bounce usw.) und lege die Wiederholungen fest (1-10 oder unendlich). Klicke auf Play, um deine Animation zu sehen, und kopiere dann das erzeugte CSS.

Keyframe-Eigenschaften erklärt

Opacity: Steuert die Transparenz des Elements an jedem Keyframe-Stopp. Werte reichen von 0 (völlig transparent) bis 1 (völlig undurchsichtig). Nutze opacity für Fade-in-, Fade-out- und Pulseffekte.
Translate X/Y (px): Verschiebt das Element horizontal und vertikal von seiner ursprünglichen Position. Negative Werte bewegen nach links/oben, positive nach rechts/unten. Kombiniere mit anderen Transformationen für Slide-, Bounce- und Float-Animationen.
Rotate (deg): Dreht das Element im Uhrzeigersinn (positiv) oder gegen den Uhrzeigersinn (negativ) um seinen Mittelpunkt. Für Spin-, Wobble- und Schwingeffekte. Werte zwischen -360 und 360 Grad werden unterstützt.
Scale: Ändert die Größe des Elements relativ zur Originalgröße. 1 ist Normalgröße, 0,5 halbe Größe und 2 doppelte Größe. Kombiniere mit opacity für dramatische Eingangseffekte.
Hintergrundfarbe: Legt die Hintergrundfarbe des Elements an jedem Stopp fest. Der Browser interpoliert weich zwischen den Farben, was Farbzyklus-Effekte und Stimmungsübergänge ermöglicht.
Reihenfolge der Transformationen: Bei mehreren Transformationsfunktionen werden sie der Reihe nach angewendet - erst translate, dann rotate, dann scale. Diese Reihenfolge beeinflusst das visuelle Endergebnis und wird vom erzeugten CSS korrekt behandelt.

Datenschutz, Sicherheit und Verfügbarkeit

Deine Privatsphäre hat Priorität. Der Animation-Keyframe-Generator verarbeitet alles lokal im Browser über das CSS-Rendering der Browser-Engine. Keine Daten werden an einen Server gesendet - deine Animationseinstellungen und Keyframe-Konfigurationen verlassen nie dein Gerät. Das Tool ist komplett kostenlos, ohne Registrierung, ohne Nutzungslimits und ohne versteckte Einschränkungen. Nutze es bedenkenlos für private Projekte, kommerzielle Websites oder Kundenarbeit.

Häufig gestellte Fragen

CSS-Transitions animieren zwischen zwei Zuständen (Start und Ende), wenn ein Auslöser eintritt. CSS-@keyframes-Animationen können mehrere Zwischenstopps haben und so komplexe mehrstufige Abläufe ermöglichen, die beim Laden der Seite automatisch mit Iterationskontrolle starten können.

Die Geschwindigkeit wird über die Eigenschaft duration gesteuert. Nutze den Dauerregler für Werte zwischen 0,1 s und 10 s. Auch die Easing-Funktion beeinflusst die wahrgenommene Geschwindigkeit: ease-in startet langsam, ease-out endet langsam und linear bleibt konstant schnell.

Eine Easing-Funktion steuert Beschleunigung und Verzögerung zwischen Keyframe-Stopps. Linear ist konstante Geschwindigkeit. Ease startet schnell und wird zur Mitte langsamer. Ease-in startet langsam und beschleunigt. Ease-out startet schnell und verzögert. Ease-in-out kombiniert sanfte Starts und Enden.

Du kannst bis zu 10 Keyframe-Stopps hinzufügen. Zwei Stopps (0 % und 100 %) sind das Minimum für eine einfache Animation, während 5-8 Stopps komplexe mehrstufige Abläufe mit unterschiedlichen Werten für Opazität, Position, Rotation, Skalierung und Farbe ermöglichen.

Ja, das erzeugte CSS ist Standard-CSS, das in allen modernen Browsern funktioniert (Chrome, Firefox, Safari, Edge, Opera). Für beste Performance nutze transform und opacity für flüssige 60-fps-Animationen mit GPU-Beschleunigung.

Unendliche Wiederholung bedeutet, dass die Animation kontinuierlich wiederholt wird. Das ist nützlich für Hintergrundeffekte, Ladespinner, springende Indikatoren und dekorative Bewegungen. Du kannst auch eine bestimmte Anzahl von Wiederholungen (1-10) für Eingangsanimationen wählen.

Ja, der Animation-Keyframe-Generator ist komplett kostenlos und ohne Einschränkungen. Keine Registrierung, keine Nutzungslimits, keine versteckten Kosten. Die gesamte Verarbeitung findet lokal im Browser statt.