Aangepaste animaties in de config
Definieer aangepaste keyframes en animation-utilities in tailwind.config.js en verwijs ernaar met animate-*-classes in uw markup.
Aangepaste animaties in de config is een gratis Tailwind CSS Academy-les op CoddyKit. Dit is les 4 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.
Verder dan de vier ingebouwde animaties
De vier ingebouwde animaties van Tailwind dekken veelvoorkomende laad- en aandachtspatronen, maar echte projecten hebben vaak extra animaties nodig: vervagingseffecten voor het binnenkomen van inhoud, zijbalken die naar binnen schuiven, schudeffecten voor formulierfouten of aangepaste varianten van pulseren. Door vermeldingen toe te voegen aan theme.extend.keyframes en theme.extend.animation in je configuratie maak je nieuwe animate-*-hulpmiddelen die precies als de ingebouwde hulpmiddelen werken.
Aangepaste keyframes definiëren
Voeg aangepaste CSS-keyframes toe in theme.extend.keyframes. Elke sleutel in het object wordt een keyframenaam. De waarde is een object waarvan de sleutels percentagestrings of de trefwoorden 'from'/'to' zijn en waarvan de waarden CSS-eigenschapsobjecten zijn. Tailwind zet deze objectnotatie om naar de CSS-regel @keyframes in de gecompileerde uitvoer. Je kunt elke animeerbare CSS-eigenschap in de keyframestappen gebruiken.
// tailwind.config.js
module.exports = {
theme: {
extend: {
keyframes: {
// Fade in from transparent
'fade-in': {
'0%': { opacity: '0' },
'100%': { opacity: '1' },
},
// Slide up from below
'slide-up': {
'0%': { opacity: '0', transform: 'translateY(16px)' },
'100%': { opacity: '1', transform: 'translateY(0)' },
},
// Shake (for errors)
'shake': {
'0%, 100%': { transform: 'translateX(0)' },
'20%, 60%': { transform: 'translateX(-8px)' },
'40%, 80%': { transform: 'translateX(8px)' },
},
},
},
},
};Aangepaste animatiehulpmiddelen registreren
Registreer de keyframes na het definiëren ervan als benoemde animaties in theme.extend.animation. De waarde is een verkorte CSS-animatiestring: name duration timing-function delay iteration-count direction fill-mode. De naam moet overeenkomen met een keyframe dat in theme.extend.keyframes is gedefinieerd. Tailwind genereert voor elke vermelding een hulpprogrammaklasse animate-{key}.
// tailwind.config.js
module.exports = {
theme: {
extend: {
keyframes: { /* ... defined above ... */ },
animation: {
'fade-in': 'fade-in 0.3s ease-out',
'slide-up': 'slide-up 0.4s ease-out',
'shake': 'shake 0.5s ease-in-out 1',
// Multiple values
'fade-in-slow': 'fade-in 1s ease-in-out',
// Infinite loop
'fade-in-out': 'fade-in 1.5s ease-in-out infinite alternate',
},
},
},
};Aangepaste animaties gebruiken in HTML
Zodra ze in de configuratie zijn geregistreerd, zijn aangepaste animaties in je HTML beschikbaar als animate-{key}-klassen. Ze werken precies zoals de ingebouwde animate-hulpprogramma's en kunnen worden gecombineerd met responsieve voorvoegsels, statusvarianten en de motion-reduce:-variant voor toegankelijkheid. De animatie wordt afgespeeld wanneer de klasse aanwezig is en stopt wanneer de klasse wordt verwijderd — ideaal voor door JavaScript geactiveerde binnenkomsteffecten.
<!-- Fade in a card on page load -->
<div class="animate-fade-in bg-white rounded-xl p-6 shadow">
Content fades in smoothly
</div>
<!-- Slide up with a slight delay using inline style -->
<div class="animate-slide-up" style="animation-delay: 150ms">
Content slides up after 150ms delay
</div>
<!-- Shake an input on validation error -->
<input
id="email"
class="border border-red-500 animate-shake focus:outline-none px-4 py-2 rounded-lg w-full"
type="email"
placeholder="Invalid email"
/>Binnenkomstanimaties voor inhoud
Binnenkomstanimaties (fade-in, slide-up, scale-in) brengen inhoud tot leven wanneer deze verschijnt. Ze zijn het effectiefst wanneer inhoud voor het eerst in de viewport komt — bij het laden van de pagina of wanneer een sectie tijdens het scrollen zichtbaar wordt. Houd de duur van binnenkomstanimaties tussen 200 en 400 ms en combineer ze altijd met een passende easing. Gebruik de Intersection Observer API in JavaScript om animaties te activeren wanneer elementen tijdens het scrollen in beeld komen.
// JavaScript: trigger animation when element enters viewport
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add('animate-slide-up');
observer.unobserve(entry.target); // animate once
}
});
}, { threshold: 0.1 });
document.querySelectorAll('.animate-on-scroll').forEach((el) => {
observer.observe(el);
});
<!-- HTML: starts invisible, gets class on scroll -->
<div class="opacity-0 animate-on-scroll">Animated on scroll</div>Complexere keyframevoorbeelden
Complexe animaties gebruiken meer percentage-stappen in keyframes om beweging in meerdere fasen te creëren. Een hartslaganimatie schaalt eerst op en daarna weer af in een ritme met twee slagen. Een flashanimatie markeert een element kort met een achtergrondkleur. Een slide-in-right-animatie verplaatst en vervaagt tegelijkertijd. Voor deze samengestelde animaties zijn meerdere percentage-stappen nodig om elke bewegingsfase nauwkeurig te beschrijven.
// tailwind.config.js
keyframes: {
'heartbeat': {
'0%, 100%': { transform: 'scale(1)' },
'14%': { transform: 'scale(1.3)' },
'28%': { transform: 'scale(1)' },
'42%': { transform: 'scale(1.3)' },
'70%': { transform: 'scale(1)' },
},
'flash': {
'0%, 50%, 100%': { opacity: '1' },
'25%, 75%': { opacity: '0.25' },
},
'slide-in-right': {
'0%': { opacity: '0', transform: 'translateX(32px)' },
'100%': { opacity: '1', transform: 'translateX(0)' },
},
},
animation: {
'heartbeat': 'heartbeat 1.2s ease-in-out infinite',
'flash': 'flash 0.5s ease-in-out',
'slide-in-right': 'slide-in-right 0.3s ease-out',
}Animatievulmodus
De CSS-eigenschap animation-fill-mode bepaalt wat er gebeurt voordat de animatie start (als er een vertraging is) en nadat deze eindigt. forwards houdt het element na het einde van de animatie in zijn eindstatus — cruciaal voor eenmalige binnenkomstanimaties waarbij je wilt dat het element zichtbaar blijft. backwards past het eerste frame toe tijdens de vertragingsperiode, zodat elementen in de juiste beginstatus starten. Neem de vulmodus op in je verkorte animatienotatie.
// animation shorthand: name | duration | easing | delay | count | fill-mode
animation: {
// 'forwards' keeps final state (element stays visible after fading in)
'fade-in': 'fade-in 0.3s ease-out forwards',
// 'backwards' applies frame-0 during delay (starts transparent during delay)
'fade-in-delayed': 'fade-in 0.4s ease-out 0.2s backwards',
// No fill mode: jumps back to initial state after animation
'shake': 'shake 0.5s ease-in-out',
}Animaties pauzeren en hervatten
Je kunt een Tailwind-animatie pauzeren met animation-play-state: paused. Voeg een aangepaste hulpprogrammaklasse toe of gebruik een willekeurige waarde: [animation-play-state:paused]. Dit is handig om laadanimaties te pauzeren wanneer een pagina niet zichtbaar is (met de Page Visibility API), of om hoveranimaties te pauzeren zodat gebruikers tijd krijgen om met inhoud te werken. Tailwind heeft geen ingebouwd hulpprogramma voor pauzeren, maar willekeurige CSS of een aangepast hulpprogramma biedt hiervoor een oplossing.
@layer utilities {
.animation-paused { animation-play-state: paused; }
.animation-running { animation-play-state: running; }
}
<!-- Pause animation on hover -->
<div class="animate-pulse hover:animation-paused bg-gray-200 rounded h-4 w-48">
Pauses pulsing when hovered
</div>
<!-- JavaScript: pause when page is hidden -->
document.addEventListener('visibilitychange', () => {
const spinners = document.querySelectorAll('.animate-spin');
spinners.forEach(el => {
el.style.animationPlayState = document.hidden ? 'paused' : 'running';
});
});Verminderde beweging respecteren in aangepaste animaties
Elke aangepaste animatie die je maakt, moet ook een motion-reduce:-behandeling hebben. De eenvoudigste aanpak is motion-reduce:animate-none om de animatie volledig uit te schakelen. Voor binnenkomstanimaties waarbij je de eindstatus toch wilt tonen, gebruik je motion-reduce:opacity-100 naast motion-reduce:animate-none om ervoor te zorgen dat het element zichtbaar is, zelfs wanneer de fade-in-animatie wordt overgeslagen.
<!-- Accessible entrance animation -->
<div
class="
opacity-0 animate-fade-in
motion-reduce:opacity-100 motion-reduce:animate-none
"
>
Content visible immediately for reduced-motion users,
fades in for others
</div>
<!-- Accessible slide-up -->
<div
class="
opacity-0 translate-y-4 animate-slide-up
motion-reduce:opacity-100 motion-reduce:translate-y-0 motion-reduce:animate-none
"
>
Reduced motion: appears instantly at final position
</div>Animatiebibliotheken van derden met Tailwind
Voor geavanceerdere animaties — veerfysica, door scrollen aangestuurde animaties of complexe choreografie — werken bibliotheken van derden zoals tailwindcss-animate, Framer Motion (React) en GSAP goed samen met Tailwind. Tailwindcss-animate biedt als plugin een uitgebreide set vooraf gebouwde keyframes (accordion-down, accordion-up, fade-in enzovoort), waarmee je de beschikbare animate-*-hulpprogramma's direct uitbreidt. Deze plugin wordt standaard gebruikt in shadcn/ui-componenten.
// Install tailwindcss-animate
// npm install tailwindcss-animate
// tailwind.config.js
module.exports = {
plugins: [
require('tailwindcss-animate'),
],
};
<!-- Now you have many new animate-* utilities -->
<div class="animate-in fade-in slide-in-from-bottom-4 duration-300">
Animated with tailwindcss-animate
</div>
<div class="animate-out fade-out slide-out-to-top-4 duration-200">
Exit animation
</div>Aangepaste animaties debuggen
Gebruik het deelvenster Animations van Chrome DevTools om aangepaste animaties te inspecteren en te debuggen. Selecteer het element in het deelvenster Elements en open daarna het deelvenster Animations. Start de animatie en je ziet de keyframecurve met tijdmarkeringen gevisualiseerd. Je kunt het afspelen vertragen tot 0,25x, zodat je elke fase zorgvuldig kunt inspecteren. In het deelvenster kun je animaties ook op aanvraag opnieuw afspelen. Dat is veel eenvoudiger dan de pagina vernieuwen om binnenkomstanimaties te onderscheppen.
Korte controle
Test je begrip van aangepaste animaties in de Tailwind-configuratie.
Samenvatting van de les
In deze les heb je geleerd om aangepaste keyframes te definiëren in theme.extend.keyframes en ze als hulpprogramma's te registreren in theme.extend.animation, animation fill-mode forwards te gebruiken voor eenmalige binnenkomstanimaties die hun eindstatus moeten behouden, en aangepaste animaties altijd te combineren met motion-reduce:animate-none voor toegankelijkheid. Hiermee is de cursus Animaties en overgangen voltooid — hierna bouwen we verfijnde componentpatronen.
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 “Aangepaste animaties in de config” gratis?
Ja — de volledige tekst van “Aangepaste animaties in de config” 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 “Aangepaste animaties in de config”?
Definieer aangepaste keyframes en animation-utilities in tailwind.config.js en verwijs ernaar met animate-*-classes in uw markup. 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 4 van 4.
Hoe lang duurt de les “Aangepaste animaties in de config”?
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