Animazioni keyframe integrate
Applichi le animate-spin, animate-ping, animate-pulse e animate-bounce integrate in Tailwind per i comuni pattern di caricamento e di richiamo dell’attenzione.
Animazioni keyframe integrate è una lezione Tailwind CSS Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Tailwind CSS Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Tailwind CSS Academy include 4 lezioni in totale.
Animazioni keyframe CSS e transizioni a confronto
Le transizioni CSS animano il passaggio tra due stati definiti da un valore iniziale e uno finale. Le animazioni keyframe CSS definiscono una sequenza di più stati e possono essere ripetute indefinitamente. Tailwind include quattro animazioni keyframe integrate tramite le utility animate-*. Queste coprono i pattern di animazione dell'interfaccia più comuni: spinner di caricamento, skeleton con effetto pulsante, ping per attirare l'attenzione e indicatori con rimbalzo, tutto senza CSS personalizzato.
animate-spin
animate-spin ruota continuamente un elemento a velocità costante: una rotazione completa di 360 gradi al secondo. È l'utility standard per gli spinner di caricamento. La applichi a un elemento circolare o a un'icona SVG per indicare un'operazione in corso. L'animazione si ripete indefinitamente finché la classe non viene rimossa. Solitamente viene abbinata a un'icona SVG ad anello con un'interruzione, così da creare l'aspetto familiare dello spinner.
<!-- Loading spinner using animate-spin -->
<svg class="animate-spin h-5 w-5 text-blue-600"
xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
</path>
</svg>
<!-- Button with spinner -->
<button class="flex items-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-lg" disabled>
<svg class="animate-spin h-4 w-4" ...></svg>
Loading...
</button>animate-ping
animate-ping crea un effetto a increspatura o a scansione radar: l'elemento si ingrandisce e diventa trasparente in un ciclo continuo. Viene utilizzata comunemente per un punto di notifica o un indicatore di attività sovrapposto a un elemento statico. L'elemento che esegue il ping dovrebbe essere posizionato in modo assoluto sopra l'elemento reale, utilizzando un wrapper con relative. L'effetto attira l'attenzione sulla notifica senza risultare eccessivamente invadente.
<!-- Notification badge with ping effect -->
<div class="relative inline-flex">
<button class="p-2 rounded-full bg-gray-100">
<!-- Bell icon -->
<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
</svg>
</button>
<!-- Ping indicator -->
<span class="absolute top-0 right-0 -mt-0.5 -mr-0.5">
<span class="animate-ping absolute inline-flex h-3 w-3 rounded-full bg-red-400 opacity-75"></span>
<span class="relative inline-flex rounded-full h-3 w-3 bg-red-500"></span>
</span>
</div>animate-pulse
animate-pulse fa variare delicatamente avanti e indietro l'opacità di un elemento, dall'opacità completa al 50% e viceversa, con un ciclo di 2 secondi. È l'animazione ideale per gli skeleton loader che mostrano la forma del contenuto mentre questo viene recuperato. La applichi a blocchi segnaposto grigi che riproducono la disposizione del contenuto in caricamento. La pulsazione discreta comunica il caricamento senza distrarre.
<!-- Skeleton loader using animate-pulse -->
<div class="p-6 space-y-4">
<!-- Avatar + title skeleton -->
<div class="flex items-center gap-3">
<div class="animate-pulse bg-gray-200 rounded-full h-10 w-10"></div>
<div class="space-y-2 flex-1">
<div class="animate-pulse bg-gray-200 rounded h-4 w-1/3"></div>
<div class="animate-pulse bg-gray-200 rounded h-3 w-1/4"></div>
</div>
</div>
<!-- Content lines skeleton -->
<div class="space-y-2">
<div class="animate-pulse bg-gray-200 rounded h-4 w-full"></div>
<div class="animate-pulse bg-gray-200 rounded h-4 w-5/6"></div>
<div class="animate-pulse bg-gray-200 rounded h-4 w-4/5"></div>
</div>
</div>animate-bounce
animate-bounce sposta un elemento verso l'alto e verso il basso con un movimento rimbalzante. Utilizza una funzione temporale cubic-bezier che crea una decelerazione naturale nella parte superiore di ogni rimbalzo. Tra gli utilizzi più comuni vi sono un indicatore a forma di freccia verso il basso che invita a scorrere, un indicatore di digitazione in una chat o un'icona di notifica che richiama l'attenzione su nuovi contenuti. Per impostazione predefinita, il rimbalzo è continuo.
<!-- Scroll indicator using animate-bounce -->
<div class="flex flex-col items-center gap-2 mt-16">
<p class="text-sm text-gray-500">Scroll to explore</p>
<svg class="animate-bounce w-6 h-6 text-gray-400"
fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</div>
<!-- Typing indicator (three bouncing dots) -->
<div class="flex gap-1 p-3 bg-gray-100 rounded-2xl rounded-tl-none w-16">
<div class="animate-bounce h-2 w-2 bg-gray-400 rounded-full" style="animation-delay: 0ms"></div>
<div class="animate-bounce h-2 w-2 bg-gray-400 rounded-full" style="animation-delay: 150ms"></div>
<div class="animate-bounce h-2 w-2 bg-gray-400 rounded-full" style="animation-delay: 300ms"></div>
</div>Usare animate-none per interrompere le animazioni
animate-none rimuove qualsiasi animazione attiva da un elemento. È utile con le varianti responsive o di stato per disabilitare un'animazione a determinate dimensioni dello schermo o in specifiche condizioni. Ad esempio, potrebbe utilizzare motion-reduce:animate-none per disabilitare tutte le animazioni per gli utenti che preferiscono un movimento ridotto, oppure interrompere uno spinner di caricamento quando i dati sono stati caricati, alternando la classe con JavaScript.
<!-- Stop animation for reduced-motion users -->
<svg class="animate-spin motion-reduce:animate-none h-5 w-5 text-blue-600">
...
</svg>
<!-- Stop animation at large screens -->
<div class="animate-pulse lg:animate-none bg-gray-200 rounded h-4 w-48">
<!-- Only pulses on mobile/tablet, static on desktop -->
</div>
<!-- JavaScript: remove animation when done -->
<!-- spinner.classList.remove('animate-spin'); -->Combinare animate con il rendering condizionale
Nei framework basati su componenti, in genere si mostra condizionalmente lo stato di rotazione o pulsazione in base allo stato di caricamento. La classe di animazione fa parte del componente skeleton o di caricamento, che viene visualizzato mentre vengono recuperati i dati e poi sostituito dal contenuto reale al termine del recupero. Questo approccio mantiene la gestione delle animazioni nell'interfaccia dello stato di caricamento, invece di aggiungere o rimuovere classi tramite codice.
// React: conditional rendering for loading state
function UserCard({ user, isLoading }) {
if (isLoading) {
return (
<div class="p-6 space-y-3">
<div class="animate-pulse bg-gray-200 rounded-full h-12 w-12"></div>
<div class="animate-pulse bg-gray-200 rounded h-4 w-32"></div>
<div class="animate-pulse bg-gray-200 rounded h-3 w-24"></div>
</div>
);
}
return (
<div class="p-6">
<img src={user.avatar} class="h-12 w-12 rounded-full" />
<p class="font-semibold mt-3">{user.name}</p>
<p class="text-gray-500 text-sm">{user.role}</p>
</div>
);
}Numero di ripetizioni e modalità di riempimento delle animazioni
Le animazioni integrate di Tailwind vengono ripetute all'infinito per impostazione predefinita. Se deve eseguire un'animazione un numero specifico di volte (una volta per un'animazione di ingresso, due volte per un lampeggio che attira l'attenzione), deve utilizzare proprietà personalizzate CSS o una classe di animazione personalizzata. Estenda theme.extend.keyframes e theme.extend.animation nella configurazione per aggiungere animazioni con un numero di ripetizioni e modalità di riempimento controllati.
// tailwind.config.js — add a one-shot animation
module.exports = {
theme: {
extend: {
keyframes: {
'shake': {
'0%, 100%': { transform: 'translateX(0)' },
'20%, 60%': { transform: 'translateX(-6px)' },
'40%, 80%': { transform: 'translateX(6px)' },
},
},
animation: {
'shake': 'shake 0.5s ease-in-out 1', // runs once
},
},
},
};
<!-- Usage -->
<input class="animate-shake border-red-500" type="text" placeholder="Shake on error" />Sfalsare le animazioni integrate
Sfalsare i ritardi dell'animazione tra elementi fratelli crea un coinvolgente effetto a cascata. Tailwind non dispone di un'utility integrata per lo sfalsamento, ma può utilizzare attributi style inline per impostare valori individuali di animation-delay. Per un elenco di elementi, aumenti il ritardo di ciascun elemento di 50–100 ms. Mantenga il tempo totale dello sfalsamento inferiore a 300 ms, così gli utenti non dovranno aspettare la comparsa dell'ultimo elemento.
<!-- Staggered skeleton loaders -->
<ul class="space-y-3">
<li class="animate-pulse bg-gray-200 rounded h-12" style="animation-delay: 0ms"></li>
<li class="animate-pulse bg-gray-200 rounded h-12" style="animation-delay: 75ms"></li>
<li class="animate-pulse bg-gray-200 rounded h-12" style="animation-delay: 150ms"></li>
<li class="animate-pulse bg-gray-200 rounded h-12" style="animation-delay: 225ms"></li>
</ul>
<!-- Staggered bounce dots -->
<div class="flex gap-1">
<div class="animate-bounce w-2 h-2 bg-blue-500 rounded-full" style="animation-delay: 0ms"></div>
<div class="animate-bounce w-2 h-2 bg-blue-500 rounded-full" style="animation-delay: 150ms"></div>
<div class="animate-bounce w-2 h-2 bg-blue-500 rounded-full" style="animation-delay: 300ms"></div>
</div>Applicare le animazioni in modo responsive
Come tutte le utility di Tailwind, le classi animate funzionano con i prefissi responsive. Può disabilitare un'animazione sugli schermi grandi, dove lo stato di caricamento potrebbe essere meno necessario, oppure applicare animazioni diverse a breakpoint diversi. Utilizzi i prefissi sm:, md:, lg: con animate-none per disabilitare progressivamente le animazioni man mano che il viewport cresce, mantenendo l'esperienza più leggera su desktop.
<!-- Animate on mobile, static on desktop -->
<div class="animate-pulse md:animate-none bg-gray-200 rounded h-12 w-full">
Pulses on mobile, static on md+ screens
</div>
<!-- Spinner only visible on small screens -->
<svg class="animate-spin sm:hidden h-5 w-5 text-blue-600" ...></svg>
<!-- Use different animations at different breakpoints -->
<div class="animate-bounce md:animate-ping lg:animate-spin h-4 w-4 rounded-full bg-green-500">
Different animation per breakpoint
</div>Pattern di caricamento reale
Un'esperienza di caricamento di livello professionale combina più utility di animazione. L'area principale del contenuto mostra uno skeleton con animate-pulse applicato ai blocchi segnaposto. Un indicatore di stato utilizza animate-ping. Se in un pulsante o nell'intestazione è presente uno spinner visibile, animate-spin viene applicato all'SVG dello spinner. Tutte le animazioni dovrebbero arrestarsi quando il contenuto viene caricato, per poi essere sostituite dal contenuto reale senza salti improvvisi.
<!-- Full loading state with multiple animations -->
<div class="border border-gray-200 rounded-xl p-6">
<!-- Status indicator -->
<div class="flex items-center gap-2 mb-4">
<div class="relative">
<span class="animate-ping absolute h-3 w-3 rounded-full bg-blue-400 opacity-75"></span>
<span class="h-3 w-3 rounded-full bg-blue-600 block relative"></span>
</div>
<span class="text-sm text-gray-500">Fetching data...</span>
<svg class="animate-spin h-4 w-4 text-blue-500 ml-auto" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
</svg>
</div>
<!-- Skeleton content -->
<div class="space-y-3">
<div class="animate-pulse h-4 bg-gray-200 rounded w-3/4"></div>
<div class="animate-pulse h-4 bg-gray-200 rounded w-1/2"></div>
<div class="animate-pulse h-4 bg-gray-200 rounded w-5/6"></div>
</div>
</div>Verifica rapida
Verifichi la Sua comprensione delle animazioni keyframe integrate di Tailwind.
Riepilogo della lezione
In questa lezione ha imparato che animate-spin crea spinner di caricamento, animate-ping crea increspature per le notifiche, animate-pulse crea skeleton loader e animate-bounce crea indicatori con rimbalzo verticale. Utilizzi motion-reduce:animate-none per disabilitare le animazioni per gli utenti che preferiscono un movimento ridotto. Ora creeremo animazioni keyframe personalizzate tramite la configurazione di Tailwind.
Impara HTML con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 30
- Lezioni
- 120
Domande Frequenti
La lezione «Animazioni keyframe integrate» è gratuita?
Sì — il testo completo di «Animazioni keyframe integrate» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Tailwind CSS Academy, passa a CoddyKit PRO. Il corso Tailwind CSS Academy include 4 lezioni in totale.
Cosa imparerò in «Animazioni keyframe integrate»?
Applichi le animate-spin, animate-ping, animate-pulse e animate-bounce integrate in Tailwind per i comuni pattern di caricamento e di richiamo dell’attenzione. Eserciti Tailwind CSS Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Tailwind CSS Academy?
Non è richiesta alcuna esperienza precedente. Tailwind CSS Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.
Quanto tempo richiede la lezione «Animazioni keyframe integrate»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Tailwind CSS Academy?
Sì. Ogni lezione Tailwind CSS Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Utility per le transizioni
- Durata e funzione di easing
- Animazioni keyframe integrate
- Animazioni personalizzate nella configurazione