CSS-Animation-Generator
CSS-Animationen mit Keyframes, Dauer, Verzögerung, Wiederholung und Easing gestalten – Live-Vorschau, Code für CSS und Tailwind.
Der CSS-Animation-Generator baut Animationen mit Keyframes: Du legst Zwischenschritte fest und stellst Verschiebung, Skalierung, Drehung und Deckkraft ein, dazu Dauer, Verzögerung, Wiederholungen, Richtung, Fill-Mode und Easing. Die Vorschau läuft live. Ausgabe als @keyframes mit animation-Kurzform sowie für Tailwind v4 und v3.
Keyframes
@keyframes slide-up {
0% {
transform: translate(0px, 40px);
opacity: 0;
}
100% {
transform: translate(0px, 0px);
opacity: 1;
}
}
.element {
animation: slide-up 0.8s ease-out 0s infinite normal both;
}Wie funktionieren CSS-Animationen?
Eine CSS-Animation besteht aus zwei Teilen: einer @keyframes-Regel, die die
Zwischenzustände beschreibt, und der Eigenschaft animation, die sie einem Element
zuweist und Dauer, Verzögerung, Wiederholung und Easing festlegt.
Die animation-Kurzform
| Teil | Beispiel |
|---|---|
| name | slide-up |
| duration | 0.8s |
| timing-function | ease-out |
| delay | 0s |
| iteration-count | 1 oder infinite |
| direction | normal, alternate |
| fill-mode | both |
So gehst du vor
- Vorlage laden und Keyframes anpassen.
- Zeit und Easing feinjustieren.
- Code kopieren. Schatten und Formen für den animierten Zustand entstehen im Box-Shadow-Generator und Clip-Path-Generator.
Beispiel
Eine Karte gleitet beim Laden ein: Keyframe 0 % mit translateY(40px) und opacity: 0, Keyframe 100 % ohne Änderung, Dauer 0,7 s, ease-out und fill-mode: both. Vergiss nicht, Animationen bei prefers-reduced-motion abzuschwächen.
Häufige Fragen
Was sind Keyframes?
Keyframes legen fest, wie ein Element zu bestimmten Zeitpunkten der Animation aussehen soll, angegeben in Prozent der Dauer. Der Browser berechnet die Zwischenwerte selbst.
Was macht animation-fill-mode?
Es legt fest, ob die Werte des ersten Keyframes schon während der Verzögerung gelten (backwards) und ob das Element nach dem Ende im letzten Zustand bleibt (forwards). both kombiniert beides und ist für Einblend-Animationen meist richtig.
Wie oft läuft die Animation?
Mit animation-iteration-count, entweder als Zahl oder infinite für endlos. Mit direction: alternate läuft jede zweite Wiederholung rückwärts, was Pulsieren und Schweben natürlicher wirken lässt.
Wie berücksichtige ich Nutzer, die Bewegung nicht mögen?
Mit der Media Query prefers-reduced-motion: reduce. Darin schaltest du Animationen ab oder verkürzt sie. Vestibuläre Störungen können durch große Bewegungen ausgelöst werden, deshalb ist das keine Kür, sondern gute Praxis.
Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.