Animazioni Tailwind: classi integrate e keyframe personalizzati
Guida alle animazioni Tailwind
Animazioni Tailwind: classi integrate e keyframe personalizzati | We.Inc
Guarda animate-spin, ping, pulse e bounce in azione con il loro CSS esatto, poi aggiungi keyframe personalizzati in Tailwind v4 con @theme, usando un generatore di keyframe e consigli sul movimento ridotto.
Tailwind include quattro animazioni pronte: animate-spin per i loader, animate-ping per i pallini di notifica, animate-pulse per gli skeleton screen e animate-bounce per gli inviti a scorrere, più animate-none per fermarle. In v4 ne aggiungi di tue dichiarando una variabile --animate-name e i relativi @keyframes dentro @theme, il che crea una classe animate-name.
Utility di animazione integrate in Tailwind v4
Classe
Valore
Uso tipico
spin 1s linear infinite
Spinner di caricamento
ping 1s cubic-bezier(0, 0, 0.2, 1) infinite
Badge live o di non letto
pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite
Segnaposto skeleton
bounce 1s infinite
Frecce per scorrere in giù
animation: none
Disattivare un'animazione a un breakpoint o in uno stato
Ogni animazione integrata qui sotto è in esecuzione dal vivo, accanto ai keyframe che Tailwind genera per essa. Poi costruiscine una personalizzata: scegli il movimento, la temporizzazione e il numero di ripetizioni e copia un blocco @theme pronto per Tailwind v4, oppure la configurazione corrispondente per i vecchi progetti v3.
Guarda le quattro animazioni integrate e copia la classe che ti serve.
Attiva l'anteprima del movimento ridotto per vedere cosa fanno motion-safe e motion-reduce.
Usa il generatore di keyframe per scegliere movimento, durata, easing e numero di ripetizioni.
Incolla il blocco @theme generato nel file CSS che importa Tailwind, poi usa la nuova classe.
Racchiudi il movimento decorativo in motion-safe:, così chi chiede al sistema meno movimento non lo riceve.
Anima transform e opacity. Animare width, height o top costringe a ricalcolare il layout a ogni frame.
Usa animate-[name_duration_easing] per un valore occasionale; dentro le parentesi quadre i trattini bassi sostituiscono gli spazi.
Per hover e cambi di stato, una utility di transizione è di solito meglio di un'animazione con keyframe.
Mantieni brevi le animazioni di entrata, tra 150 e 300 millisecondi circa, così la pagina non sembra mai lenta.
Domande frequenti
Come aggiungo un'animazione personalizzata in Tailwind v4?
Dentro @theme nel tuo file CSS principale, dichiara --animate-wiggle: wiggle 1s ease-in-out infinite; e metti la regola @keyframes wiggle nello stesso blocco @theme. Tailwind genera allora una classe animate-wiggle che puoi usare ovunque.
Dove sono finiti i keyframe di tailwind.config.js in v4?
v4 si configura in CSS, quindi theme.extend.keyframes e theme.extend.animation diventano @keyframes e variabili --animate-* dentro @theme. Una configurazione JavaScript funziona ancora se la carichi con la direttiva @config, utile durante una migrazione.
Come faccio a eseguire un'animazione una sola volta?
Togli infinite dal valore e aggiungi forwards se l'elemento deve restare sull'ultimo frame, per esempio --animate-fade-in: fade-in 0.3s ease-out forwards. Per un caso isolato puoi anche scrivere animate-[fade-in_0.3s_ease-out_forwards].
Tailwind rispetta automaticamente le impostazioni di movimento ridotto?
No. Le varianti motion-safe: e motion-reduce: corrispondono alla media query prefers-reduced-motion, ma devi applicarle tu. Uno schema comune è motion-safe:animate-bounce, che anima solo per chi non ha chiesto un movimento ridotto.
A cosa serve ogni animazione integrata
Spin ruota un elemento di un giro completo ogni secondo ed è adatta ai loader circolari. Ping ingrandisce una copia di un pallino fino al doppio della sua dimensione mentre la dissolve, con l'effetto di un impulso radar; mettila su uno span con posizionamento assoluto dietro un pallino pieno.
Pulse abbassa l'opacità a metà e la riporta su in due secondi, l'aspetto standard dei blocchi skeleton grigi mentre il contenuto si carica. Bounce spinge un elemento in su di un quarto della sua altezza e lo lascia ricadere, il che funziona per una singola freccia che invita a scorrere, e raramente altrove.
Keyframe personalizzati in v4
Tailwind v4 ha spostato la configurazione nel CSS. Qualsiasi variabile nel namespace --animate-* dentro @theme diventa una utility animate-*, e gli @keyframes scritti nello stesso blocco vengono generati insieme a essa. Non serve registrare nient'altro.
Mantieni identici il nome nella variabile e il nome in @keyframes. Se non coincidono, ottieni una classe che imposta un'animazione puntata su keyframe inesistenti, quindi niente si muove e non compare alcun errore.
Movimento e accessibilità
Movimenti ampi, ripetuti o in parallasse possono far sentire male alcune persone. I sistemi operativi offrono un'impostazione per ridurre il movimento, e i browser la passano al CSS come prefers-reduced-motion.
I loader che comunicano uno stato possono mantenere una versione delicata, mentre i rimbalzi decorativi e gli elementi che attirano l'attenzione dovrebbero fermarsi. Fai i test con l'impostazione attiva, oppure con l'opzione di emulazione negli strumenti per sviluppatori del browser.
Il CSS dietro le classi integrate
Keyframe generati da Tailwind v4
Ogni classe animate-* imposta animation su una variabile del tema; questi sono i valori e i keyframe predefiniti.
Animazioni personalizzate in v4 e v3
Tailwind v4: @theme nel tuo CSS
Questo crea animate-wiggle e animate-fade-up. Usale subito come nomi di classe.
La vecchia configurazione JavaScript, per i progetti non ancora passati a v4.
Usarle nel markup
Valori arbitrari, un riferimento a una variabile e motion-safe, così il movimento rispetta l'impostazione di sistema.
Keyframe personalizzati dal vivo
Wiggle, fade up e una card skeleton
Equivalenti in CSS puro delle classi personalizzate sopra, così puoi modificare la temporizzazione e vederla cambiare.
Le animazioni integrate, dal vivo
Ogni anteprima usa la vera classe Tailwind. Attiva l'anteprima del movimento ridotto per vedere motion-safe all'opera.
Anteprima movimento ridotto: attiva
Anteprima movimento ridotto: disattivata
Generatore di keyframe
Scegli movimento, durata, easing e numero di ripetizioni, poi copia il blocco @theme per Tailwind v4.