So nutzt du: CSS Keyframes Generator
- Wähle eine Vorlage – fahre über die Kacheln, um sie vorab anzusehen – oder starte mit einem leeren Keyframe.
- Lege Dauer, Verzögerung, Wiederholungen, Easing und den Auslöser fest (Laden, Hover, Klick, Scrollen).
- Bearbeite die Keyframes auf der Zeitleiste: Klicke zum Hinzufügen, ziehe zum Verschieben und passe danach die Eigenschaften mit den Reglern an.
- Scrubbe, verlangsame die Animation oder aktiviere Onion Skin, um feinzujustieren, und kopiere dann das CSS, Tailwind oder HTML.
So funktionieren @keyframes
Eine @keyframes-Regel legt die Styles fest, die ein Element an bestimmten Punkten der Animation haben soll. Die Punkte werden in Prozent angegeben (from entspricht 0 %, to entspricht 100 %). Der Browser interpoliert alles dazwischen. Keyframes mit identischen Styles können sich einen Selektor teilen, etwa 0%, 100% { … }, und jeder Keyframe kann seine eigene animation-timing-function für das folgende Segment setzen.
Was du damit bauen kannst
- Keyframe-Zeitleiste – Füge beliebig viele Keyframes hinzu, verschiebe sie auf neue Prozentwerte und gib jedem sein eigenes Easing.
- Eigenschaften – translate X/Y, rotate, 3D-rotate X/Y, scale, skew, opacity, blur, glow (box-shadow), Hintergrundfarbe und border-radius. Fehlende Werte werden interpoliert, daher springen Transformationen nie.
- Auslöser – beim Laden, beim Hover, beim Klick, beim Scrollen ins Bild oder eine rein per CSS gesteuerte, scrollgesteuerte Animation.
- Stagger – Animiere eine Liste Element für Element mit einer einzigen CSS-Custom-Property.
- Prüfen – Pausiere, scrubbe Bild für Bild, verlangsame auf ¼ Tempo und aktiviere Onion Skin, um alle Keyframes auf einmal zu sehen.
- Export – CSS-Shorthand oder Longhand, HTML, JavaScript, Tailwind v3 und v4, ein SCSS-Mixin, eine eigenständige Demo-Datei oder ein Share-Link.
Die animation-Shorthand
| Teil | Beispiel | Bedeutung |
|---|---|---|
| name | fade-in-up | Die auszuführende @keyframes-Regel |
| duration | 0.6s | Länge eines Durchlaufs |
| timing function | cubic-bezier(.33,1,.68,1) | Geschwindigkeitskurve zwischen den Keyframes |
| delay | 0.2s | Wartezeit vor dem Start; negative Werte starten mitten in der Animation |
| iteration count | infinite | Anzahl der Durchläufe |
| direction | alternate | Rückwärts abspielen bei jedem zweiten Durchlauf |
| fill mode | both | Vor dem Start den ersten und nach dem Ende den letzten Frame halten |
Barrierefreiheit
Manche Menschen werden von Bewegung schwindelig oder übel. Mit aktivierter Option prefers-reduced-motion beachten schaltet das CSS die Animation für Besucher ab, die „Bewegung reduzieren“ im Betriebssystem aktiviert haben. Vermeide mehr als drei Blitze pro Sekunde und halte Endlosanimationen dezent oder biete eine Möglichkeit, sie zu pausieren.
Tipps zur Performance
Animiere transform und opacity statt top, left, width oder margin, da diese bei jedem Frame ein neues Layout erzwingen. Setze will-change nur bei Elementen, die gleich animiert werden. Passe dein Easing mit dem cubic-bezier-Generator an, füge einen Spinner aus dem CSS-Loader-Generator hinzu und kombiniere Animationen mit Box-Shadows oder Verläufen.
Auch gesucht als: keyframes css erstellen, @keyframes generator, css keyframe editor, css animation erstellen, keyframe animation css, css timeline editor.
Passende Tools zu: CSS Keyframes Generator
- CSS-Animation-Generator — Gestalte CSS-Animationen auf einer echten Keyframe-Timeline.
- CSS Hover-Animation Generator — Gestalte Hover-Animationen für Buttons, Karten, Links und Icons.
- Klemmenrechner — Gib eine Mindest- und Höchstgröße sowie den Ansichtsbereich ein – du erhältst einen zoomfreundlichen clamp() Wert mit einer Erklärung der Berechnung, einer Live-Vorschau und einer vollständigen Skalierung für flüssige Schriftgrößen oder Abstände.
- PX zu REM Umrechner — Rechne zwischen Pixeln, rem und em mit deiner eigenen Root-Schriftgröße um – oder füge ein ganzes Stylesheet ein und konvertiere jeden px-Wert auf einmal.
Häufige Fragen
Darf ich den generierten CSS-Code kostenlos verwenden?
Kann ich eine vorhandene Animation bearbeiten?
Wie starte ich die Animation, wenn das Element ins Bild scrollt?
animation-timeline: view() ganz ohne JavaScript in Browsern, die es unterstützen.Funktioniert das mit Tailwind CSS?
tailwind.config.js für v3 und einen @theme-Block für v4, damit du die Animation als animate-*-Klasse nutzen kannst.Welche Eigenschaften eignen sich am besten für flüssige Animationen?
transform und opacity laufen im GPU-Compositor und bleiben selbst auf langsamen Smartphones flüssig. Blur, Schatten, Farben und border-radius kosten mehr Leistung, setze sie also sparsam bei großen Elementen ein.