Knappen på nettsiden din skifter farge når brukeren holder musepekeren over den, men endringen skjer øyeblikkelig. Det ene bildet erstattes av det neste uten overgang, og opplevelsen føles brå og upolert. En CSS transition gjør overgangen mellom to tilstander myk og kontrollert. I stedet for et brått hopp fra hvit til rød bakgrunn glir fargen jevnt over en halv sekund. Det er forskjellen mellom en nettside som føles mekanisk og en som føles gjennomarbeidet.
Hva er en CSS transition?
En transition i CSS definerer hvordan en egenskap endrer seg over tid når elementets tilstand skifter. Tilstandsskiftet kan komme fra en pseudo-klasse som :hover, :focus eller :active, eller fra en klasse som legges til med JavaScript. Transition styrer ikke hva som endres, men hvordan endringen ser ut. Uten transition skjer endringen på ett enkelt bilde. Med transition fordeles endringen over den tidsperioden du velger.
Transition-duration bestemmer farten
Den viktigste egenskapen er transition-duration, som angir hvor lang tid overgangen skal ta. Verdien skrives i sekunder eller millisekunder: 0.5s betyr et halvt sekund, 250ms betyr 250 millisekunder. Uten duration skjer ingen animasjon, uansett hva du ellers har definert.
Som vist i videoleksjonen: du definerer en hover-tilstand på en knapp med ny bakgrunnsfarge, border-radius og tekstfarge. Uten transition hopper knappen fra tilstand 1 til tilstand 2 øyeblikkelig. Legger du til transition-duration: 0.5s, glir alle endringene mykt over et halvt sekund. Prøver du 2 sekunder, ser du tydelig hvordan fargen gradvis skifter. De fleste UI-overganger fungerer best mellom 200 og 500 millisekunder.
Transition-property velger hva som animeres
Med transition-property angir du hvilke CSS-egenskaper som skal animeres. Standardverdien all animerer alt som endres, men det er bedre praksis å spesifisere. Skriver du transition-property: background-color, animeres bare bakgrunnsfargen, mens border-radius og farge endres øyeblikkelig. Du kan liste flere egenskaper separert med komma.
Å spesifisere egenskaper gir deg kontroll over hvilke endringer som føles myke og hvilke som skal være umiddelbare. Det gir også bedre ytelse, fordi nettleseren slipper å overvåke alle egenskapene for endringer.
Transition-timing-function styrer kurven
Ikke alle bevegelser bør skje med jevn hastighet. Transition-timing-function bestemmer akselerasjonskurven for overgangen. Standardverdien ease starter sakte, akselererer, og bremser mot slutten. Andre vanlige verdier er linear for konstant hastighet, ease-in som akselererer gradvis, og ease-out som bremser mot slutten.
For de fleste knapper og hover-effekter fungerer ease eller ease-in-out best fordi de etterligner naturlig bevegelse. Lineære overganger passer bedre for fremdriftslinjer og lasteindikatorer der jevn hastighet gir mer mening.
Transition-delay utsetter starten
Med transition-delay kan du utsette starten av overgangen. Verdien fungerer som duration og skrives i sekunder eller millisekunder. En delay på 0.2s betyr at overgangen starter 200 millisekunder etter at tilstandsskiftet skjer. Det er nyttig for staggered-effekter der flere elementer animeres etter hverandre, eller for å hindre at raske musebevegelser utløser overganger utilsiktet.
Shorthand-egenskapen transition
I stedet for å skrive fire separate egenskaper kan du bruke shorthand-egenskapen transition. Rekkefølgen er: property, duration, timing-function og delay. For eksempel: transition: background-color 0.3s ease 0s. Vil du animere flere egenskaper med ulike innstillinger, separerer du dem med komma. Shorthand gjør koden kortere og lettere å lese når du først kjenner rekkefølgen.
Hvilke egenskaper kan animeres?
Ikke alle CSS-egenskaper kan animeres med transition. Egenskaper som har mellomverdier fungerer: farger, størrelser, padding, margin, opacity og box-shadow. Egenskaper som bare har diskrete tilstander, som display, fungerer ikke. Nettleseren kan ikke beregne en mellomverdi mellom display: none og display: block, så den hopper rett over.
For best ytelse bør du primært animere transform og opacity. Disse egenskapene håndteres av GPU-en og gir jevne 60fps-animasjoner selv på svakere enheter. Du finner en komplett oversikt i MDN sin liste over animerbare CSS-egenskaper.
Lær mer om CSS-animasjon med video
Denne artikkelen bygger på en videoleksjon fra CSS-animasjonskurset på Utdannet.no. I kurset lærer du:
- Hvordan du kontrollerer overganger med transition-duration, timing-function og delay
- Hvordan du bygger hover-effekter og interaktive knapper med myke overganger
- Hvordan du kombinerer transitions med CSS-variabler for dynamiske tema-bytter
