Duur en easing

Twee eigenschappen bepalen hoe een CSS-overgang aanvoelt: duur (hoe lang de animatie duurt) en timingfunctie (hoe de animatie in die tijd versnelt en vertraagt). Als je deze goed instelt, voelen animaties vlot en doelbewust aan in plaats van traag of mechanisch. Tailwind biedt voor beide utilities, zodat je het gevoel van beweging eenvoudig kunt afstellen zonder aangepaste CSS.

De duration-*-utilities van Tailwind stellen de CSS-eigenschap transition-duration in. De waarden lopen van duration-75 (75 ms, zeer vlot) tot duration-1000 (1000 ms, een volledige seconde). De standaardduur wanneer je transition gebruikt zonder een klasse duration-* is 150 ms. De meeste interacties in een interface moeten korter dan 300 ms zijn om responsief aan te voelen — langere duur is alleen geschikt voor dramatische animaties op paginaniveau.

De duur moet aansluiten bij hoe groot de wijziging aanvoelt. Kleine interacties zoals de hoverstatus van een knop, focusranden en veranderingen van linkkleur zien er het best uit bij 100–200 ms. Gemiddelde overgangen zoals het verschijnen van een vervolgkeuzemenu, het uitklappen van een kaart of het vervagen van een tooltip werken goed bij 200–300 ms. Grote bewegingen zoals een zijbalk die naar binnen schuift, een modaal venster dat verschijnt of overgangen tussen pagina's kunnen 300–500 ms duren. Overschrijd nooit 500 ms voor UI-overgangen — gebruikers mogen nooit het gevoel krijgen dat ze op een animatie wachten.

De timingfunctie (of easingfunctie) bepaalt hoe de voortgang van de animatie over de tijd wordt verdeeld. Een lineaire animatie beweegt met een constante snelheid. Een ease-in begint langzaam en versnelt. Een ease-out begint snel en vertraagt. Een ease-in-out begint en eindigt langzaam, met een snel middengedeelte. Verschillende interacties voelen het natuurlijkst aan met verschillende easingfuncties — de juiste keuze is een subtiel maar belangrijk detail in een verfijnd UI-ontwerp.

De keuze tussen ease-in en ease-out heeft een intuïtieve betekenis: ease-in bouwt momentum op (geschikt voor elementen die het scherm verlaten of inklappen), omdat ze langzaam beginnen en versnellen terwijl ze verdwijnen. ease-out vertraagt (geschikt voor elementen die het scherm binnenkomen), omdat ze snel aankomen en soepel op hun plek tot stilstand komen. Dit weerspiegelt de natuurkunde uit de echte wereld — dingen die stoppen vertragen meestal, en dingen die beginnen versnellen meestal.

ease-in-out zorgt bij de meeste UI-animaties voor de natuurlijkst aanvoelende beweging. Het weerspiegelt hoe fysieke objecten bewegen: ze beginnen vanuit stilstand, bouwen snelheid op tot een maximum en vertragen daarna weer tot stilstand. Gebruik dit als standaard voor elke animatie waarbij elementen tussen posities bewegen — schuivende zijbalken, openende modale vensters, uitklappende kaarten en accordeonknoppen voelen allemaal het natuurlijkst aan met ease-in-out.

De hulpprogramma's delay-* voegen een pauze toe voordat de overgang begint, met behulp van de CSS-eigenschap transition-delay. Vertragingen zijn nuttig voor trapsgewijze animaties — als een reeks elementen na elkaar verschijnt, ontstaat een trapsgewijs effect dat verfijnd aanvoelt. Tailwind biedt vertragingen van delay-75 (75 ms) tot delay-1000 (1000 ms). Gebruik vertragingen spaarzaam bij hoverinteracties — vertragingen die alleen bij hover worden geactiveerd, voelen voor gebruikers niet responsief aan.

Als je ontwerpsysteem specifieke timingwaarden vereist die niet in de standaardwaarden van Tailwind staan — zoals duration-250 of een aangepaste cubic-bezier-easing — voeg je die toe in tailwind.config.js. Breid transitionDuration uit voor nieuwe duurwaarden en transitionTimingFunction voor nieuwe easingcurven. Met aangepaste easing kun je het bewegingskarakter van je merk vastleggen, zodat animaties herkenbaar als die van jouw merk aanvoelen.

Een handige techniek voor hoverinteracties is verschillende timings voor het binnenkomen en verlaten te gebruiken. Dat bereik je door verschillende duurwaarden toe te passen met responsieve voorvoegsels of statusvoorvoegsels. Meestal zijn overgangen bij het binnenkomen via hover iets sneller dan bij het verlaten — het binnenkomen voelt vlot aan en het verdwijnen verloopt zachter. Hiervoor is een kleine hoeveelheid aangepaste CSS of JavaScript-manipulatie van klassen nodig, omdat Tailwind geen ingebouwde variant voor 'hover verlaten' heeft.

Bij elementen die vaak worden geanimeerd kun je de browser een aanwijzing geven om ze naar een eigen compositorlaag te promoveren met will-change. Tailwind heeft in de kern geen ingebouwd will-change-hulpmiddel, maar je kunt er een toevoegen via willekeurige waarden of een aangepast hulpmiddel. Gebruik will-change: transform echter spaarzaam — te veel elementen promoveren kost geheugen en kan de prestaties juist verlagen.

Chrome DevTools heeft uitstekende hulpmiddelen voor het debuggen van overgangen. Open het deelvenster Animations (More tools → Animations) om alle actieve animaties en overgangen te bekijken. Je kunt door de tijdlijn bladeren, animaties op lagere snelheid opnieuw afspelen (0.25x, 0.5x) en de berekende curve van de timingfunctie inspecteren. Zo kun je eenvoudig controleren of je keuzes voor duur en easing er precies uitzien zoals bedoeld, zonder snel te hoeven hoveren om snelle animaties te vangen.

In deze les heb je geleerd dat duurhulpmiddelen van duration-75 tot duration-1000 bepalen hoelang overgangen duren, dat ease-out het best is voor elementen die het scherm binnenkomen en ease-in voor elementen die het scherm verlaten, en dat delay-*-hulpmiddelen pauzes toevoegen voordat overgangen beginnen, waardoor trapsgewijze animatie-effecten mogelijk worden. Hierna bekijken we de ingebouwde keyframe-animaties van Tailwind voor laad- en aandachtsgedrag.