Tailwind-Animationen: eingebaute Klassen und eigene Keyframes
Leitfaden zu Tailwind-Animationen
Tailwind-Animationen: eingebaute Klassen und eigene Keyframes | We.Inc
Sieh animate-spin, ping, pulse und bounce live mit ihrem exakten CSS und ergänze dann eigene Keyframes in Tailwind v4 mit @theme, mit einem Keyframe-Builder und Tipps zu reduzierter Bewegung.
Tailwind liefert vier fertige Animationen: animate-spin für Ladeanzeigen, animate-ping für Benachrichtigungspunkte, animate-pulse für Skeleton Screens und animate-bounce für Scroll-Hinweise, dazu animate-none, um sie zu stoppen. In v4 fügst du eigene hinzu, indem du in @theme eine Variable --animate-name und ihre @keyframes deklarierst. Daraus entsteht eine Klasse animate-name.
Eingebaute Animations-Utilities in Tailwind v4
Klasse
Wert
Typischer Einsatz
spin 1s linear infinite
Lade-Spinner
ping 1s cubic-bezier(0, 0, 0.2, 1) infinite
Live- oder Ungelesen-Badges
pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite
Skeleton-Platzhalter
bounce 1s infinite
Pfeile zum Runterscrollen
animation: none
Eine Animation an einem Breakpoint oder in einem Zustand abschalten
Jede eingebaute Animation unten läuft live, neben den Keyframes, die Tailwind dafür erzeugt. Dann baust du eine eigene: Wähle Bewegung, Timing und Anzahl der Wiederholungen und kopiere einen fertigen @theme-Block für Tailwind v4 oder die passende Konfiguration für ältere v3-Projekte.
Sieh dir die vier eingebauten Animationen an und kopiere die Klasse, die du brauchst.
Schalte die Vorschau für reduzierte Bewegung um, um zu sehen, was motion-safe und motion-reduce bewirken.
Wähle im Keyframe-Builder Bewegung, Dauer, Easing und Anzahl der Wiederholungen.
Füge den erzeugten @theme-Block in die CSS-Datei ein, die Tailwind importiert, und nutze dann die neue Klasse.
Pack dekorative Bewegung in motion-safe:, damit Menschen, die in ihrem System weniger Bewegung eingestellt haben, sie nicht bekommen.
Animiere transform und opacity. Das Animieren von width, height oder top erzwingt in jedem Frame Layout-Arbeit.
Nutze animate-[name_duration_easing] für einen einmaligen Wert; Unterstriche stehen in den Klammern für Leerzeichen.
Für Hover und Zustandswechsel ist ein Transition-Utility meist besser als eine Keyframe-Animation.
Halte Einblend-Animationen kurz, etwa 150 bis 300 Millisekunden, damit sich die Seite nie langsam anfühlt.
Häufige Fragen
Wie füge ich in Tailwind v4 eine eigene Animation hinzu?
Deklariere in @theme in deiner Haupt-CSS-Datei --animate-wiggle: wiggle 1s ease-in-out infinite; und setze die Regel @keyframes wiggle in denselben @theme-Block. Tailwind erzeugt dann eine Klasse animate-wiggle, die du überall nutzen kannst.
Wo sind die Keyframes aus tailwind.config.js in v4 geblieben?
v4 wird in CSS konfiguriert, daher werden theme.extend.keyframes und theme.extend.animation zu @keyframes und --animate-*-Variablen in @theme. Eine JavaScript-Konfiguration funktioniert weiterhin, wenn du sie mit der Direktive @config lädst, was bei einer Migration hilft.
Wie lasse ich eine Animation nur einmal laufen?
Lass infinite im Wert weg und füge forwards hinzu, wenn das Element im letzten Frame bleiben soll, zum Beispiel --animate-fade-in: fade-in 0.3s ease-out forwards. Für einen Einzelfall kannst du auch animate-[fade-in_0.3s_ease-out_forwards] schreiben.
Berücksichtigt Tailwind Einstellungen für reduzierte Bewegung automatisch?
Nein. Die Varianten motion-safe: und motion-reduce: entsprechen der Media Query prefers-reduced-motion, aber du musst sie selbst anwenden. Ein gängiges Muster ist motion-safe:animate-bounce, das nur für Menschen animiert, die keine reduzierte Bewegung eingestellt haben.
Wofür jede eingebaute Animation gedacht ist
Spin dreht ein Element jede Sekunde einmal komplett und passt zu runden Ladeanzeigen. Ping skaliert eine Kopie eines Punkts auf die doppelte Größe und blendet sie dabei aus, was wie ein Radarimpuls wirkt; setze es auf ein absolut positioniertes span hinter einem gefüllten Punkt.
Pulse senkt die Deckkraft über zwei Sekunden auf die Hälfte und wieder zurück, der Standard-Look für graue Skeleton-Blöcke, während Inhalte laden. Bounce schiebt ein Element um ein Viertel seiner Höhe nach oben und lässt es zurückfallen. Das funktioniert für einen einzelnen Pfeil, der zum Scrollen einlädt, und kaum anderswo.
Eigene Keyframes in v4
Tailwind v4 hat die Konfiguration ins CSS verlegt. Jede Variable im Namensraum --animate-* in @theme wird zu einem animate-*-Utility, und @keyframes im selben Block werden mit ausgegeben. Sonst muss nichts registriert werden.
Halte den Namen in der Variable und den Namen in @keyframes identisch. Weichen sie ab, entsteht eine Klasse, die eine Animation auf nicht existierende Keyframes setzt: Nichts bewegt sich, und es erscheint kein Fehler.
Bewegung und Barrierefreiheit
Große, sich wiederholende oder Parallax-Bewegungen können manchen Menschen Unwohlsein bereiten. Betriebssysteme bieten eine Einstellung für reduzierte Bewegung, und Browser geben sie als prefers-reduced-motion an CSS weiter.
Ladeanzeigen, die einen Status vermitteln, können eine sanfte Version behalten, während dekorative Bounces und Blickfänger stoppen sollten. Teste mit eingeschalteter Einstellung oder mit der Emulationsoption in den Entwicklertools deines Browsers.
Das CSS hinter den eingebauten Klassen
Keyframes, die Tailwind v4 erzeugt
Jede animate-*-Klasse setzt animation auf eine Theme-Variable; das sind die Standardwerte und Keyframes.
Eigene Animationen in v4 und v3
Tailwind v4: @theme in deinem CSS
Das erzeugt animate-wiggle und animate-fade-up. Nutze sie sofort als Klassennamen.
Die ältere JavaScript-Konfiguration für Projekte, die noch nicht auf v4 umgestiegen sind.
Verwendung im Markup
Beliebige Werte, eine Variablenreferenz und motion-safe, damit die Bewegung die Systemeinstellung respektiert.
Eigene Keyframes live
Wiggle, Fade-up und eine Skeleton-Karte
Reine CSS-Entsprechungen der eigenen Klassen oben, damit du das Timing bearbeiten und die Änderung sehen kannst.
Die eingebauten Animationen live
Jede Vorschau nutzt die echte Tailwind-Klasse. Schalte die Vorschau für reduzierte Bewegung ein, um motion-safe in Aktion zu sehen.
Vorschau reduzierte Bewegung: an
Vorschau reduzierte Bewegung: aus
Keyframe-Builder
Wähle Bewegung, Dauer, Easing und Anzahl der Wiederholungen und kopiere dann den @theme-Block für Tailwind v4.