CSS Transities en Keyframe Animaties: De Basis

Begrijp het verschil tussen transities en keyframes. We behandelen timing, easing-functies en hoe je vloeiende effecten maakt zonder performance-problemen.

12 min leestijd Beginner April 2026

Ontwerper werkt aan CSS-animaties op computer met meerdere monitors in moderne studio

Marijn van der Meer

Senior Frontend Designer & Animation Specialist

Senior Frontend Designer gespecialiseerd in prestatie-gerichte UI-animaties en microinteracties met 12 jaar ervaring in Nederlandse webprojecten.

Waarom Animaties Belangrijk Zijn

Animaties zijn niet zomaar leuk oogappel. Ze geven gebruikers feedback, maken interfaces voelen minder statisch en verbeteren de algehele ervaring. Het probleem? Veel developers weten niet precies wanneer ze transities of keyframes moeten gebruiken.

Transities en keyframes zijn beide CSS-tools, maar ze werken totaal anders. Transities gaan van punt A naar punt B. Keyframes geven je volledige controle over elk stapje van de weg. Het verschil begrijpen is cruciaal voor het bouwen van snelle, elegante interfaces.

Code editor toont CSS transities en keyframes syntaxis met gekleurde syntax highlighting op donker scherm

Visueel diagram toont transities als rechte pijl van beginstatus naar eindstatus met tijdverloop

Transities: Eenvoudig van A naar B

Een transitie is eigenlijk heel simpel. Je stelt een beginwaarde in, je wijzigt die waarde, en CSS berekent automatisch alle stappen ertussen. Dat is het. Je hebt twee toestanden nodig — start en einde. Niets meer.

Transities werken het best voor eenvoudige acties. Button hover-effecten, menu-slideouts, opacity-veranderingen. Alles wat je van één staat naar een andere gaat. Ze’re snel en heel efficiënt omdat je weinig code nodig hebt.

Key Properties

transition-property: welke eigenschap animeren
transition-duration: hoe lang (meestal 0.3s tot 0.5s)
transition-timing-function: easing (ease, ease-in-out, cubic-bezier)
transition-delay: wachttijd voordat het start

Keyframes: Volledige Controle Over Elke Stap

Keyframes geven je veel meer macht. Je definieert niet zomaar begin en einde — je stelt in wat er op elk moment gebeurt. 0%, 25%, 50%, 75%, 100%. Of zelfs meer tussenpunten als je wilt.

Denk aan keyframes als een volledig geschreven verhaal. Transities zijn slechts “open boek op pagina 1, sluit op pagina 100”. Keyframes laten je vertellen wat er op elke pagina staat. Je kunt elementen heen en weer laten gaan, roteren, schalen en nog veel meer — allemaal in precies de juiste volgorde.

Het grote verschil? Keyframes draaien gewoon af. Je hoeft ze niet te activeren met hover of JavaScript. Ze lopen op hun eigen tempo zodra de pagina laadt (tenzij je animation-play-state zet op paused).

Voorbeeld: Pulserende knop

@keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } }

Schematische weergave van keyframes met meerdere controlepunten op tijdlijn, 0% 25% 50% 75% 100%

Grafiek toont verschillende easing-curves: linear, ease, ease-in, ease-out, ease-in-out

Timing en Easing: Het Voelt Juist

Een animatie die te snel gaat voelt ruw. Te langzaam en gebruikers denken dat het kapot is. Je moet de juiste duur vinden. Voor de meeste microinteracties? 300-500 milliseconden is perfect. Button hovers: 250ms. Groter bewegingen: 600-800ms.

Easing functies bepalen hoe de animatie versnelt en vertraagt. Linear is vlak — dezelfde snelheid van begin tot eind. Ease-out voelt natuurlijk omdat dingen in het echte leven zo bewegen — snel starten, langzaam uitbollen. Ease-in-out is glad en voelt professioneel.

Cubic-bezier geeft je volledige controle. Je kunt eigenlijk elke beweging creëren die je wilt. Maar eerlijk? Voor 95% van je werk volstaan ease en ease-out.

Performance: Niet Alle Animaties Zijn Gelijk

Dit is kritiek. Sommige CSS-eigenschappen animeren vloeiend. Andere zullen je hele site vertragen. Transform en opacity? Die zijn snel — echt snel. De browser kan ze renderen zonder het hele page opnieuw te berekenen.

Width, height, left, right? Die zijn traag. Ze veroorzaken reflow. De browser moet alles herberekenen. Als je 20 elementen tegelijk op deze manier animeren, wordt je frame rate verschrikkelijk.

Snelle Animaties (Gebruik Deze)

transform: scale(), rotate(), translate()
opacity
filter (blur, brightness, etc.)

Langzame Animaties (Vermijd Deze)

width / height
left / right / top / bottom
padding / margin
border-radius

Browser developer tools toont performance metrics en frame rate monitor met groene stabiele FPS-grafiek

Praktische Voorbeelden: Wanneer Gebruik Je Wat?

Transities Gebruiken

Button hover-effecten (scale, color change)
Menu’s slide in/uit
Links die van kleur veranderen
Form inputs die focussen (border-color, box-shadow)
Modals fade in/out

Keyframes Gebruiken

Laadspinners (continue rotatie)
Pulserende elementen
Bounce-effecten (veel controlepunten nodig)
Complexe animaties met meerdere fases
Infinite loops (animatie-advertisement banner)

De Basis Samengevat

Transities zijn jouw go-to voor eenvoudige state-veranderingen. Ze’re makkelijk te schrijven, snel uit te voeren en perfect voor alles wat van A naar B gaat. Keyframes zijn voor meer geavanceerde dingen — loops, multi-fase animaties, ingewikkelde bewegingen.

Het belangrijkste? Test je animaties op echte apparaten. Een smooth animatie op jouw developer machine betekent niets als het traag is op een telefoon van iemands oma. Focus op transform en opacity. Vermijd width/height. Hou animaties onder de 600ms tenzij je een goed reden hebt om langer te gaan.

Nu je het verschil kent, ga je meer dan waarschijnlijk beide gebruiken in dezelfde project. Dat is normaal. Ze vullen elkaar aan. Combineer ze, experiment, en maak interfaces die voelen als ze leven.

Opmerking

Deze gids is informatief en gebaseerd op best practices in frontend-ontwikkeling. Browserondersteuning en performance kunnen variëren afhankelijk van je doel-devices en browser-versies. Test altijd je animaties in echte omgevingen. CSS-syntaxis en mogelijkheden worden regelmatig bijgewerkt — controleer de officiële W3C-specificaties voor de meest actuele informatie.