Varighet og easing

To egenskaper styrer hvordan en CSS-overgang føles: varighet (hvor lenge animasjonen varer) og tidsfunksjon (hvordan animasjonen akselererer og bremser i løpet av denne tiden). Å velge riktig verdi er forskjellen mellom animasjoner som føles raske og tilsiktede, og animasjoner som føles trege eller mekaniske. Tailwind tilbyr utility-klasser for begge deler, slik at De enkelt kan finjustere bevegelsesfølelsen uten egendefinert CSS.

Tailwinds duration-*-utility-klasser angir CSS-egenskapen transition-duration. Verdiene går fra duration-75 (75 ms, svært raskt) til duration-1000 (1000 ms, ett helt sekund). Standardvarigheten når De bruker transition uten en duration-*-klasse, er 150 ms. De fleste brukergrensesnittinteraksjoner bør vare under 300 ms for å føles responsive – lengre varigheter passer bare for dramatiske animasjoner på sidenivå.

Varigheten bør samsvare med den opplevde størrelsen på endringen. Små interaksjoner, som knappepekere, fokusringer og endringer i lenkefarge, ser best ut ved 100–200 ms. Mellomstore overganger, som når en rullegardin vises, et kort utvides eller et verktøytips tones inn, fungerer godt ved 200–300 ms. Store bevegelser, som når et sidestolpepanel glir inn, en modal vises eller sider byttes, kan vare opptil 300–500 ms. Overskrid aldri 500 ms for UI-overganger – brukerne skal aldri føle at de venter på en animasjon.

Tidsfunksjonen (eller utjevningsfunksjonen) styrer hvordan animasjonens fremdrift fordeles over tid. En lineær animasjon beveger seg med konstant hastighet. En ease-in-animasjon starter sakte og akselererer. En ease-out-animasjon starter raskt og bremser ned. En ease-in-out-animasjon starter og avsluttes sakte, med høy hastighet i midten. Ulike interaksjoner føles mest naturlige med ulike utjevninger – gode valg er en subtil, men viktig detalj i et gjennomarbeidet UI-design.

Valget mellom ease-in og ease-out har en intuitiv betydning: ease-in bygger opp fart (passer godt for elementer som forlater skjermen eller skjules), fordi de starter sakte og øker hastigheten idet de forsvinner. ease-out bremser ned (passer godt for elementer som kommer inn på skjermen), fordi de ankommer raskt og finner plassen sin på en jevn måte. Dette gjenspeiler fysikken i den virkelige verden – ting som stopper, bremser vanligvis ned, mens ting som begynner å bevege seg, akselererer.

ease-in-out skaper den mest naturlige bevegelsen for de fleste UI-animasjoner. Det gjenspeiler hvordan fysiske objekter beveger seg: De starter i ro, øker til maksimal hastighet og bremser deretter tilbake til ro. Bruk det som standard for alle animasjoner der elementer beveger seg mellom posisjoner – sidestolpepaneler som glir, modaler som vises, kort som utvides og trekkspillbrytere føles alle mest naturlige med ease-in-out.

delay-*-verktøyklassene legger inn en pause før overgangen begynner, ved hjelp av CSS-egenskapen transition-delay. Forsinkelser er nyttige for sekvensielle animasjoner – når en serie elementer vises etter hverandre, oppstår en kaskadeeffekt som føles gjennomarbeidet. Tailwind tilbyr forsinkelser fra delay-75 (75 ms) til delay-1000 (1000 ms). Bruk forsinkelser sparsomt for interaksjoner ved pekerbevegelse – forsinkelser som bare utløses ved pekerbevegelse, får grensesnittet til å føles tregt for brukerne.

Hvis designsystemet krever bestemte tidsverdier som ikke finnes i Tailwinds standardverdier – for eksempel duration-250 eller en egendefinert cubic-bezier-utjevning – kan du legge dem til i tailwind.config.js. Utvid transitionDuration med nye varighetsverdier og transitionTimingFunction med nye utjevningskurver. Egendefinert utjevning kan uttrykke merkevarens bevegelsesuttrykk, slik at animasjonene får en gjenkjennelig stil.

En nyttig teknikk for interaksjoner ved pekerbevegelse er å bruke ulik varighet når elementet vises og skjules. Dette kan du oppnå ved å bruke ulike varigheter med responsive prefikser eller tilstandsprefikser. Vanligvis er overganger når pekeren føres inn, litt raskere enn når den føres ut – visningen føles snappy, mens skjulingen tones roligere ut. Dette krever litt egendefinert CSS eller manipulering av JavaScript-klasser, siden Tailwind ikke har en innebygd «un-hover»-variant.

For elementer som animeres ofte, kan du gi nettleseren et hint om å flytte dem til sitt eget kompositorlag ved hjelp av will-change. Tailwind har ikke et innebygd will-change-verktøy i kjernen, men du kan legge til ett med vilkårlige verdier eller et egendefinert verktøy. Bruk likevel will-change: transform sparsomt – det sløser med minnet å flytte for mange elementer til egne lag, og det kan faktisk gjøre ting tregere.

Chrome DevTools har utmerkede verktøy for feilsøking av overganger. Åpne panelet Animations (More tools → Animations) for å se alle animasjoner og overganger som kjører. Du kan skrubbe gjennom tidslinjen, spille av animasjoner på lavere hastighet (0.25x, 0.5x) og undersøke kurven for den beregnede tidsfunksjonen. Dermed blir det enkelt å kontrollere at valgene av varighet og utjevning ser nøyaktig ut slik du ønsker, uten å måtte bevege pekeren raskt for å rekke å se korte animasjoner.

I denne leksjonen lærte du at varighetsverktøyklassene fra duration-75 til duration-1000 styrer hvor lang tid overganger tar, at ease-out passer best for elementer som kommer inn på skjermen, mens ease-in passer for elementer som forlater den, og at delay-*-verktøyklassene legger inn pauser før overganger starter, slik at du kan lage sekvensielle animasjonseffekter. Neste gang utforsker vi Tailwinds innebygde keyframe-animasjoner for innlastings- og oppmerksomhetsmønstre.