Transition-utilities
Schakel CSS-transitions in met transition-*, en kies welke properties animeren met transition-colors, transition-transform en transition-all.
Transition-utilities is een gratis Tailwind CSS Academy-les op CoddyKit. Dit is les 1 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.
Waarom CSS-overgangen belangrijk zijn
CSS-overgangen maken statuswijzigingen vloeiend en doelbewust in plaats van abrupt. Wanneer een knop bij aanwijzen van achtergrondkleur verandert, een zijbalk inschuift of een invoerveld een focusrand krijgt, laten overgangen gebruikers weten dat er iets is gebeurd en leiden ze hun aandacht. Met de overgangsutilities van Tailwind voeg je deze animaties met één klasse toe — voor de meest voorkomende situaties is aangepaste CSS niet nodig.
De transition-utility
De basisutility transition schakelt CSS-overgangen in voor de eigenschappen die het vaakst worden geanimeerd: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform en filter. Alleen transition aan een knop toevoegen is meestal genoeg om kleurveranderingen bij aanwijzen vloeiend te animeren.
<!-- Simple hover transition on a button -->
<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition">
Hover Me
</button>
<!-- The transition class enables smooth color changes -->
<!-- Without it, the color snaps instantly on hover -->
<!-- With it, the background color animates over 150ms (Tailwind default) -->Specifieke overgangseigenschappen
Gebruik gerichte overgangsutilities om alleen specifieke eigenschappen te animeren. Dit is performanter dan transition-all, omdat de browser niet bij elk frame alle mogelijke geanimeerde eigenschappen opnieuw hoeft te berekenen. Tailwind biedt transition-colors, transition-opacity, transition-shadow, transition-transform en transition-all voor verschillende behoeften.
<!-- Only animate colors -->
<button class="bg-blue-600 hover:bg-blue-700 text-white transition-colors">
Color Transition
</button>
<!-- Only animate transform (GPU accelerated) -->
<div class="hover:scale-105 transition-transform cursor-pointer">
Scale on hover
</div>
<!-- Only animate opacity -->
<div class="opacity-100 hover:opacity-75 transition-opacity">
Fade on hover
</div>
<!-- Animate shadow (depth change) -->
<div class="shadow hover:shadow-lg transition-shadow rounded-xl p-4">
Shadow depth change
</div>transition-all tegenover specifieke eigenschappen
transition-all laat elke animeerbare CSS-eigenschap tegelijkertijd overgaan. Dat is handig, maar kan onverwacht gedrag veroorzaken — zo kunnen lay-outeigenschappen zoals height of width worden geanimeerd terwijl je alleen kleurveranderingen wilde. Het is ook minder performant, omdat de browser alle eigenschappen bijhoudt. Gebruik waar mogelijk specifieke overgangsutilities en gebruik transition-all alleen wanneer je echt meerdere niet-gerelateerde eigenschappen samen wilt animeren.
<!-- transition-all: animates EVERYTHING that changes -->
<div class="bg-gray-100 hover:bg-blue-50 hover:scale-102 transition-all">
All properties animate (colors, transforms, borders...)
</div>
<!-- More precise: only animate what you intend -->
<div class="bg-gray-100 hover:bg-blue-50 hover:scale-102 transition-colors transition-transform">
Only colors and transforms animate
</div>Transition combineren met statusvarianten
Overgangsutilities werken door de CSS-eigenschap transition in te schakelen. Statusvarianten zoals hover:, focus: en group-hover: leveren de begin- en eindstatus waartussen de overgang animeert. Plaats de klasse transition altijd op het basiselement (niet binnen de variant), zodat deze in beide richtingen werkt — de overgang wordt zowel bij het binnengaan als bij het verlaten van de status uitgevoerd.
<!-- Transition enables smooth enter AND exit -->
<a class="text-gray-600 hover:text-blue-600 transition-colors duration-200"
href="#">
Animated link — hover to see color change both ways
</a>
<!-- Card with multiple transitions -->
<div class="bg-white hover:bg-blue-50
shadow-sm hover:shadow-md
border border-gray-200 hover:border-blue-200
transition-all duration-200 rounded-xl p-6 cursor-pointer">
Interactive card
</div>Ondoorzichtigheid en zichtbaarheid animeren
Elementen laten verschijnen en verdwijnen vereist dat je opacity laat overgaan en tegelijkertijd visibility of display beheert. CSS-overgangen kunnen niet van of naar display: none animeren, dus gebruik voor eenvoudige vervagingseffecten opacity in combinatie met pointer-events-none. Voor elementen die echt moeten verdwijnen (zodat ze niet meer in de tabvolgorde staan), combineer je overgangen van de ondoorzichtigheid met het wisselen van klassen in JavaScript.
<!-- Fade an element using opacity + pointer-events -->
<div id="tooltip"
class="opacity-0 pointer-events-none
group-hover:opacity-100 group-hover:pointer-events-auto
transition-opacity duration-200
bg-gray-900 text-white text-xs px-2 py-1 rounded">
Tooltip content
</div>
<!-- JavaScript fade with class toggle -->
<!-- Remove: classList.add('opacity-0', 'pointer-events-none') -->
<!-- Show: classList.remove('opacity-0', 'pointer-events-none') -->Overgangen van transformaties
Overgangen van transformaties zijn bijzonder vloeiend, omdat ze op de GPU worden uitgevoerd in plaats van herberekeningen van de lay-out te veroorzaken. De utilities scale-*, rotate-*, translate-* en skew-* van Tailwind animeren allemaal netjes met transition-transform. Schaal effecten op kaarten en knoppen, rotatie-effecten op pictogrammen en inschuifeffecten op panelen gebruiken deze aanpak voor de beste prestaties.
<!-- Subtle scale effect on card hover -->
<div class="hover:scale-105 transition-transform duration-200 cursor-pointer bg-white rounded-xl p-6 shadow">
Card that scales up on hover
</div>
<!-- Rotating icon -->
<button class="group p-2">
<svg class="w-5 h-5 group-hover:rotate-180 transition-transform duration-300">
<!-- chevron icon -->
</svg>
</button>
<!-- Slide from left with translateX -->
<div class="-translate-x-full open:translate-x-0 transition-transform duration-300">
Sidebar panel
</div>Toegankelijkheid bij minder beweging
Sommige gebruikers worden misselijk van beweging of krijgen aanvallen door animaties en stellen hun besturingssysteem in op Beweging verminderen. Tailwind biedt de varianten motion-reduce: en motion-safe:, die worden geactiveerd op basis van de mediaquery prefers-reduced-motion van de gebruiker. Gebruik motion-safe: om animaties alleen toe te passen wanneer de gebruiker niet om minder beweging heeft gevraagd, zodat je overgangen standaard toegankelijk zijn.
<!-- Only animate when user is OK with motion -->
<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg
motion-safe:transition-colors motion-safe:duration-200">
Accessible Button
</button>
<!-- Remove transitions entirely for reduced-motion users -->
<div class="hover:scale-105 motion-reduce:transform-none
motion-safe:transition-transform motion-safe:duration-200">
Accessible card hover
</div>Overgang bij focusstatussen
Focusovergangen zijn vooral belangrijk voor toetsenbordnavigatie. Wanneer een gebruiker met Tab naar een invoerveld of knop gaat, moet de focusrand vloeiend verschijnen in plaats van plotseling. Pas transition toe op alle interactieve elementen, zodat de overgang van de focusrand net zo verzorgd aanvoelt als de overgang bij aanwijzen. Voeg focus:ring-* en focus:ring-offset-* samen met een overgang toe voor de beste ervaring met het toetsenbord.
<input
type="text"
class="
w-full px-4 py-2 rounded-lg
border border-gray-300
text-gray-900 placeholder:text-gray-400
ring-0
focus:ring-2 focus:ring-blue-500 focus:border-transparent focus:outline-none
transition duration-150
"
placeholder="Smooth focus ring transition"
/>Meerdere overgangseigenschappen
Je kunt meerdere specifieke overgangsutilities op één element combineren om alleen een nauwkeurig bepaalde set eigenschappen te animeren. Tailwind stelt deze samen met de CSS-afkorting transition-property. Door transition-colors en transition-shadow op hetzelfde element te stapelen, worden zowel kleuren als schaduwen geanimeerd, terwijl andere eigenschappen (zoals transformaties) onmiddellijk veranderen.
<!-- Animate colors AND shadows, but not transforms -->
<div class="
bg-white hover:bg-gray-50
shadow hover:shadow-md
scale-100 hover:scale-105
transition-colors transition-shadow
duration-200 rounded-xl p-6
">
Colors and shadows animate smoothly;
scale change happens instantly (no transition-transform)
</div>Transition in de praktijk: volledig voorbeeld
Hier is een realistische navigatielink met volledig uitgewerkte overgangen: de achtergrond vervaagt bij aanwijzen, de tekstkleur verandert tegelijk, de onderstreping groeit van links naar rechts met een schaaltransformatie en de focusstatussen komen exact overeen met de stijl bij aanwijzen. Elke interactie voelt doelbewust en vloeiend aan, zonder ook maar één regel aangepaste CSS.
<a
href="/features"
class="
relative inline-block
text-gray-600 hover:text-blue-600
font-medium text-sm
pb-0.5
transition-colors duration-150
focus:outline-none focus:text-blue-600
group
"
>
Features
<!-- Animated underline -->
<span class="
absolute bottom-0 left-0 w-full h-0.5 bg-blue-600
scale-x-0 group-hover:scale-x-100
transition-transform duration-200 origin-left
"></span>
</a>Korte controle
Test je begrip van de overgangsutilities van Tailwind.
Samenvatting van de les
In deze les heb je geleerd dat de basisutility transition vloeiende animatie voor veelgebruikte eigenschappen inschakelt, dat specifieke overgangsutilities zoals transition-colors en transition-transform performanter zijn dan transition-all en dat de variant motion-safe: ervoor zorgt dat animaties alleen worden toegepast wanneer de gebruiker niet om minder beweging heeft gevraagd. Hierna regelen we de overgangsduur en timingfuncties.
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 “Transition-utilities” gratis?
Ja — de volledige tekst van “Transition-utilities” 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 “Transition-utilities”?
Schakel CSS-transitions in met transition-*, en kies welke properties animeren met transition-colors, transition-transform en transition-all. 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 1 van 4.
Hoe lang duurt de les “Transition-utilities”?
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