Ingebouwde keyframe-animaties
Pas Tailwinds ingebouwde animate-spin, animate-ping, animate-pulse en animate-bounce toe voor veelvoorkomende laad- en aandachtsfuncties.
Ingebouwde keyframe-animaties is een gratis Tailwind CSS Academy-les op CoddyKit. Dit is les 3 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Tailwind CSS Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Tailwind CSS Academy bevat in totaal 4 lessen.
CSS-keyframe-animaties versus overgangen
CSS-overgangen animeren tussen twee toestanden die door een begin- en eindwaarde zijn gedefinieerd. CSS-keyframe-animaties definiëren een reeks van meerdere toestanden en kunnen onbeperkt worden herhaald. Tailwind bevat vier ingebouwde keyframe-animaties via de hulpprogramma's animate-*. Deze dekken de meest voorkomende UI-animatiepatronen: laadspinners, pulserende skeletschermen, aandachttrekkende pings en stuiterende indicatoren — allemaal zonder aangepaste CSS.
animate-spin
animate-spin draait een element continu met constante snelheid rond — één volledige rotatie van 360 graden per seconde. Dit is het standaardhulpmiddel voor laadspinners. Pas het toe op een rond element of SVG-pictogram om een bewerking in uitvoering aan te geven. De animatie wordt onbeperkt herhaald totdat de klasse wordt verwijderd. Meestal wordt dit gecombineerd met een SVG-ringpictogram met een onderbreking om het vertrouwde uiterlijk van een spinner te creëren.
<!-- 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 creëert een rimpel- of radarscaneffect — het element wordt groter en vervaagt in een lus. Het wordt vaak gebruikt als meldingspunt of activiteitsindicator boven op een statisch element. Het pingende element moet absoluut boven op het echte element worden geplaatst, met behulp van een wrapper met relative. Het effect trekt de aandacht naar de melding zonder overdreven afleidend te zijn.
<!-- 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 laat de dekking van een element zacht heen en weer vervagen — van volledige dekking naar 50% en terug, in een lus van 2 seconden. Dit is de perfecte animatie voor skeleton-laders die de vorm van inhoud tonen terwijl deze wordt opgehaald. Pas dit toe op grijze plaatshouderblokken die overeenkomen met de indeling van de inhoud die wordt geladen. Het subtiele pulseren maakt duidelijk dat er wordt geladen zonder af te leiden.
<!-- 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 beweegt een element op en neer in een stuiterende beweging. Er wordt een cubic-bezier-timingfunctie gebruikt die boven aan elke sprong voor een natuurlijke vertraging zorgt. Veelvoorkomende toepassingen zijn een pijl omlaag die gebruikers aanspoort te scrollen, een typindicator in een chatballon of een meldingspictogram dat de aandacht op nieuwe inhoud vestigt. De stuiter wordt standaard continu herhaald.
<!-- 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>Animaties stoppen met animate-none
animate-none verwijdert elke actieve animatie van een element. Dit is nuttig met responsieve varianten of statusvarianten om een animatie bij bepaalde schermformaten of omstandigheden uit te schakelen. Je kunt bijvoorbeeld motion-reduce:animate-none gebruiken om alle animaties uit te schakelen voor gebruikers die de voorkeur geven aan minder beweging, of een laadspinner stoppen zodra de gegevens zijn geladen door de klasse met JavaScript aan en uit te zetten.
<!-- 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'); -->animate combineren met voorwaardelijke weergave
In frameworks die op componenten zijn gebaseerd, toon je de draaiende of pulserende toestand meestal voorwaardelijk op basis van de laadstatus. De animatieklasse maakt deel uit van de skeleton- of laadcomponent die wordt weergegeven terwijl gegevens worden opgehaald, en wordt daarna vervangen door echte inhoud wanneer het ophalen is voltooid. Zo blijven animatiezaken in de UI van de laadstatus, in plaats van dat je programmatisch klassen moet toevoegen en verwijderen.
// 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>
);
}Aantal animatieherhalingen en vulmodus
De ingebouwde animaties van Tailwind worden standaard oneindig herhaald. Als je een animatie een specifiek aantal keer wilt uitvoeren (één keer voor een binnenkomstanimatie, twee keer voor een aandachtsflits), moet je CSS-aangepaste eigenschappen of een aangepaste animatieklasse gebruiken. Breid theme.extend.keyframes en theme.extend.animation in je configuratie uit om animaties met gecontroleerde aantallen herhalingen en vulmodi toe te voegen.
// 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" />Ingebouwde animaties trapsgewijs uitvoeren
Door animatievertragingen over elementen die dezelfde ouder hebben trapsgewijs te verdelen, ontstaat een aantrekkelijk trapsgewijs effect. Tailwind heeft geen ingebouwd hulpmiddel voor trapsgewijze animaties, maar je kunt inline style-attributen gebruiken om afzonderlijke waarden voor animation-delay in te stellen. Verhoog bij een lijst met items de vertraging van elk item met 50–100 ms. Houd de totale trapsgewijze vertraging onder 300 ms, zodat gebruikers niet op het laatste item hoeven te wachten.
<!-- 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>Animaties responsief toepassen
Net als alle Tailwind-hulpmiddelen werken animate-klassen met responsieve voorvoegsels. Je kunt een animatie uitschakelen op grote schermen, waar de laadstatus mogelijk minder nodig is, of verschillende animaties toepassen bij verschillende breekpunten. Gebruik de voorvoegsels sm:, md: en lg: met animate-none om animaties geleidelijk uit te schakelen naarmate het weergavegebied groter wordt, zodat de ervaring op desktop licht blijft.
<!-- 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>Laadpatroon uit de praktijk
Een laadervaring van productiekwaliteit combineert meerdere animatiehulpmiddelen. Het hoofdgedeelte van de inhoud toont een skeleton met animate-pulse op plaatshouderblokken. Een statusindicator gebruikt animate-ping. Als er een zichtbare spinner in een knop of koptekst staat, wordt animate-spin toegepast op de SVG van de spinner. Alle animaties moeten stoppen zodra de inhoud is geladen en worden vervangen door de echte inhoud zonder een schokkerige sprong.
<!-- 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>Korte controle
Test je begrip van de ingebouwde keyframe-animaties van Tailwind.
Samenvatting van de les
In deze les heb je geleerd dat animate-spin laadspinners creëert, animate-ping rimpelingen voor meldingen creëert, animate-pulse skeleton-laders creëert en animate-bounce verticaal stuiterende indicatoren creëert. Gebruik motion-reduce:animate-none om animaties uit te schakelen voor gebruikers die de voorkeur geven aan minder beweging. Hierna maken we aangepaste keyframe-animaties via de Tailwind-configuratie.
Leer HTML met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 30
- Lessen
- 120
Veelgestelde vragen
Is de les “Ingebouwde keyframe-animaties” gratis?
Ja — de volledige tekst van “Ingebouwde keyframe-animaties” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus Tailwind CSS Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus Tailwind CSS Academy bevat in totaal 4 lessen.
Wat leer ik in “Ingebouwde keyframe-animaties”?
Pas Tailwinds ingebouwde animate-spin, animate-ping, animate-pulse en animate-bounce toe voor veelvoorkomende laad- en aandachtsfuncties. Je oefent met Tailwind CSS Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Tailwind CSS Academy te beginnen?
Ervaring vooraf is niet nodig. Tailwind CSS Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 3 van 4.
Hoe lang duurt de les “Ingebouwde keyframe-animaties”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Tailwind CSS Academy?
Ja. Elke les over Tailwind CSS Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Transition-utilities
- Duur en easing
- Ingebouwde keyframe-animaties
- Aangepaste animaties in de config