Inbyggda keyframe-animationer
Tillämpa Tailwinds inbyggda animate-spin, animate-ping, animate-pulse och animate-bounce för vanliga mönster för laddning och uppmärksamhet.
Inbyggda keyframe-animationer är en gratis lektion i Tailwind CSS Academy på CoddyKit. Detta är lektion 3 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Tailwind CSS Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Tailwind CSS Academy innehåller totalt 4 lektioner.
CSS-keyframe-animeringar jämfört med övergångar
CSS-övergångar animerar mellan två tillstånd som definieras av ett startvärde och ett slutvärde. CSS-keyframe-animeringar definierar en sekvens av flera tillstånd och kan upprepas utan slut. Tailwind innehåller fyra inbyggda keyframe-animeringar via verktygen animate-*. De täcker de vanligaste animeringsmönstren i användargränssnitt: laddningssnurror, pulserande skelett, pingar som fångar uppmärksamheten och studsande indikatorer – allt utan anpassad CSS.
animate-spin
animate-spin roterar ett element kontinuerligt med konstant hastighet – ett helt varv på 360 grader per sekund. Det är standardverktyget för laddningssnurror. Tillämpa det på ett cirkelformat element eller en SVG-ikon för att visa att en åtgärd pågår. Animeringen upprepas utan slut tills klassen tas bort. Det kombineras oftast med en SVG-ikon i form av en ring med ett mellanrum, vilket skapar det välbekanta utseendet hos en laddningssnurra.
<!-- 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 skapar en krusnings- eller radarsvepseffekt – elementet skalas upp och tonas ut i en loop. Det används ofta som en aviseringspunkt eller aktivitetsindikator ovanpå ett statiskt element. Det pingande elementet bör positioneras absolut ovanpå det riktiga elementet med hjälp av en wrapper med relative. Effekten drar blicken till aviseringen utan att vara alltför störande.
<!-- 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 tonar försiktigt ett elements opacitet fram och tillbaka – från full opacitet till 50 % och tillbaka igen, i en loop på två sekunder. Det är den perfekta animeringen för skelettladdare som visar innehållets form medan det hämtas. Tillämpa den på grå platshållarblock som motsvarar layouten för innehållet som läses in. Den subtila pulseringen signalerar att innehåll laddas utan att vara störande.
<!-- 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 flyttar ett element upp och ned i en studsande rörelse. Det använder en cubic-bezier-tidsfunktion som skapar en naturlig inbromsning högst upp i varje studs. Vanliga användningsområden är en nedåtpil som uppmanar användaren att rulla, en skrivindikator i en chattbubbla eller en aviseringsikon som uppmärksammar nytt innehåll. Studsningen upprepas kontinuerligt som standard.
<!-- 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>Använda animate-none för att stoppa animeringar
animate-none tar bort alla aktiva animeringar från ett element. Det är användbart tillsammans med responsiva varianter eller tillståndsvarianter för att inaktivera en animering vid vissa skärmstorlekar eller under vissa förhållanden. Du kan till exempel använda motion-reduce:animate-none för att inaktivera alla animeringar för användare som föredrar mindre rörelse, eller stoppa en laddningssnurra när data har lästs in genom att växla klassen med 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'); -->Kombinera animate med villkorad rendering
I komponentbaserade ramverk visar du vanligtvis snurr- eller pulseringstillståndet villkorligt utifrån laddningstillståndet. Animeringsklassen ingår i skelett- eller laddningskomponenten som renderas medan data hämtas och ersätts sedan med det riktiga innehållet när hämtningen är klar. På så sätt hålls animeringslogiken i gränssnittet för laddningstillståndet i stället för att klasser läggs till och tas bort programmatiskt.
// 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>
);
}Antal animeringsiterationer och fyllnadsläge
Tailwinds inbyggda animeringar upprepas utan slut som standard. Om du behöver köra en animering ett visst antal gånger, till exempel en gång för en entréanimering eller två gånger för en uppmärksamhetsblinkning, måste du använda anpassade CSS-egenskaper eller en anpassad animeringsklass. Utöka theme.extend.keyframes och theme.extend.animation i konfigurationen för att lägga till animeringar med styrt antal iterationer och fyllnadslägen.
// 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" />Stegvis förskjutning av inbyggda animeringar
Genom att förskjuta animeringsfördröjningen mellan syskonelement skapas en engagerande kaskadeffekt. Tailwind har inget inbyggt verktyg för stegvis förskjutning, men du kan använda inline-attributet style för att ange individuella värden för animation-delay. För en lista med objekt förskjuter du varje objekts fördröjning med 50–100 ms. Håll den sammanlagda förskjutningstiden under 300 ms så att användarna inte behöver vänta på att det sista objektet ska visas.
<!-- 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>Tillämpa animeringar responsivt
Precis som alla Tailwind-verktyg fungerar animate-klasser med responsiva prefix. Du kan inaktivera en animering på stora skärmar där laddningstillståndet kanske är mindre nödvändigt, eller tillämpa olika animeringar vid olika brytpunkter. Använd prefixen sm:, md: och lg: tillsammans med animate-none för att stegvis inaktivera animeringar när visningsytan blir större och därmed hålla upplevelsen avskalad på datorer.
<!-- 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>Laddningsmönster från verkligheten
En laddningsupplevelse av produktionskvalitet kombinerar flera animeringsverktyg. Huvudinnehållet visar ett skelett med animate-pulse på platshållarblocken. En statusindikator använder animate-ping. Om det finns en synlig snurra i en knapp eller ett sidhuvud tillämpas animate-spin på snurrans SVG. Alla animeringar bör stoppas när innehållet har lästs in och ersättas med det riktiga innehållet utan något ryckigt hopp.
<!-- 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>Snabb kontroll
Testa dina kunskaper om Tailwinds inbyggda keyframe-animeringar.
Sammanfattning av lektionen
I den här lektionen lärde du dig att animate-spin skapar laddningssnurror, att animate-ping skapar krusningar för aviseringar, att animate-pulse skapar skelettladdare och att animate-bounce skapar vertikalt studsande indikatorer. Använd motion-reduce:animate-none för att inaktivera animeringar för användare som föredrar mindre rörelse. Härnäst skapar vi anpassade keyframe-animeringar via Tailwind-konfigurationen.
Lär dig HTML med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 30
- Lektioner
- 120
Vanliga frågor
Är lektionen ”Inbyggda keyframe-animationer” gratis?
Ja – hela texten till ”Inbyggda keyframe-animationer” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Tailwind CSS Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Tailwind CSS Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Inbyggda keyframe-animationer”?
Tillämpa Tailwinds inbyggda animate-spin, animate-ping, animate-pulse och animate-bounce för vanliga mönster för laddning och uppmärksamhet. Ni övar på Tailwind CSS Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Tailwind CSS Academy?
Du behöver inga förkunskaper. Utbildningen i Tailwind CSS Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.
Hur lång tid tar lektionen ”Inbyggda keyframe-animationer”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Tailwind CSS Academy-lektionen?
Ja. Varje Tailwind CSS Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Övergångsverktyg
- Varaktighet och easing
- Inbyggda keyframe-animationer
- Anpassade animationer i konfigurationen