Utjevningsfunksjoner: ease linear cubic-bezier

En easing-funksjon styrer hastighetskurven til en overgang eller animasjon – hvor raskt den akselererer eller bremser gjennom varigheten.

linear holder konstant hastighet gjennom hele overgangen. Nyttig for innlastingslinjer og fremdriftsindikatorer der jevn bevegelse forventes.

ease starter raskt og bremser mot slutten. Dette er standardverdien og føles naturlig for de fleste overganger i brukergrensesnitt.

ease-in starter sakte og akselererer. Passer godt for elementer som forlater skjermen (utgangsanimasjoner).

ease-out starter raskt og bremser ned. Passer godt for elementer som kommer inn på skjermen – de ankommer med energi og roer seg jevnt.

ease-in-out starter og slutter sakte, med raskere bevegelse i midten. Best for gjentakende animasjoner eller animasjoner som går frem og tilbake.

Definerer en egendefinert kubisk Bézier-kurve med fire kontrollpunkter. Muliggjør fjærlignende og andre egendefinerte easing-kurver.

De fire verdiene definerer to kontrollpunkter: cubic-bezier(x1, y1, x2, y2). Verdier over 1 på y-aksen skaper effekter med oversvingning (fjæreffekter). Bruk verktøy som easings.net til å visualisere kurvene.

steps(n, direction) deler animasjonen inn i n diskrete, like store trinn. Perfekt for sprite-animasjoner og skrivemaskineffekter.

Det andre argumentet styrer hvor trinnet skjer:

• jump-start: første trinn ved tidspunkt 0
• jump-end: siste trinn ved sluttidspunktet (standard)
• jump-both: trinn både ved start og slutt
• jump-none: ingen trinn ved start eller slutt

Den nye linear()-funksjonen gjør det mulig å definere vilkårlige easing-kurver gjennom flere punkter – og dermed lage fjær- og spretteffekter med ren CSS uten begrensningene til cubic-bezier.

Easing-funksjoner styrer animasjoners hastighetskurver. Innebygde alternativer er linear, ease, ease-in, ease-out og ease-in-out. Egendefinerte kurver bruker cubic-bezier(). Diskrete trinn bruker steps(). Den nye linear()-funksjonen muliggjør komplekse, fjærlignende kurver.