# Easing forklart: derfor føles god bevegelse naturlig

[Canonical HTML page](https://gradiently.design/nb/guide/easing)

Den samme bevegelsen kan virke klønete eller uanstrengt avhengig av én innstilling. Den heter easing, og noen få enkle regler dekker nesten alle tilfeller.

## The short version

- Easing beskriver hvordan farten i en bevegelse endrer seg underveis, i stedet for å være konstant fra start til slutt.
- Ease-out starter raskt og bremser ned, noe som passer ting som kommer inn; ease-in starter langsomt og øker farten, noe som passer ting som forsvinner.
- Lineær bevegelse med konstant fart virker mekanisk ved enkeltbevegelser, men er riktig for kontinuerlige løkker og rotasjoner.
- En cubic-bezier-kurve definerer easing med to kontrollpunkter, og verdier utenfor 0 til 1 gir bevegelse forbi målet.
- Fjærer beskriver bevegelse med fysiske innstillinger som stivhet og demping, og CSS kan etterligne dem med funksjonen linear().

**Easing** er hvordan farten i en bevegelse endrer seg underveis. Uten easing beveger et objekt seg med konstant fart og bråstopper, noe som virker mekanisk. Med easing øker og senker det farten slik virkelige ting gjør: en skuff glir raskt ut og faller til ro, en ball øker farten mens den faller. Riktig easing er den raskeste måten å få en animasjon til å føles naturlig på.

## Slik ser easing ut

Animatører tegner easing som et avstandsdiagram: hvor et objekt befinner seg ved like tidsintervaller. Når merkene har jevn avstand, er farten konstant. Når de samler seg, beveger objektet seg langsomt; når de sprer seg, beveger det seg raskt. Her er de fire grunnvariantene, hver med elleve jevnt fordelte tidspunkter i samme bevegelse fra venstre mot høyre.

- Lineær: jevn avstand: `linear-gradient(90deg, #f9a8d4 0% 1.2%, #1e1b4b 1.2% 9.4%, #f9a8d4 9.4% 10.6%, #1e1b4b 10.6% 19.4%, #f9a8d4 19.4% 20.6%, #1e1b4b 20.6% 29.4%, #f9a8d4 29.4% 30.6%, #1e1b4b 30.6% 39.4%, #f9a8d4 39.4% 40.6%, #1e1b4b 40.6% 49.4%, #f9a8d4 49.4% 50.6%, #1e1b4b 50.6% 59.4%, #f9a8d4 59.4% 60.6%, #1e1b4b 60.6% 69.4%, #f9a8d4 69.4% 70.6%, #1e1b4b 70.6% 79.4%, #f9a8d4 79.4% 80.6%, #1e1b4b 80.6% 89.4%, #f9a8d4 89.4% 90.6%, #1e1b4b 90.6% 98.8%, #f9a8d4 98.8% 100%)`
- Ease-in: langsom start, rask slutt: `linear-gradient(90deg, #f9a8d4 0% 2.3%, #1e1b4b 2.3% 5.6%, #f9a8d4 5.6% 6.8%, #1e1b4b 6.8% 12.4%, #f9a8d4 12.4% 13.6%, #1e1b4b 13.6% 20.9%, #f9a8d4 20.9% 22.1%, #1e1b4b 22.1% 30.9%, #f9a8d4 30.9% 32.1%, #1e1b4b 32.1% 42.3%, #f9a8d4 42.3% 43.5%, #1e1b4b 43.5% 54.9%, #f9a8d4 54.9% 56.1%, #1e1b4b 56.1% 68.6%, #f9a8d4 68.6% 69.8%, #1e1b4b 69.8% 83.3%, #f9a8d4 83.3% 84.5%, #1e1b4b 84.5% 98.8%, #f9a8d4 98.8% 100%)`
- Ease-out: rask start, myk stopp: `linear-gradient(90deg, #f9a8d4 0% 1.2%, #1e1b4b 1.2% 15.5%, #f9a8d4 15.5% 16.7%, #1e1b4b 16.7% 30.2%, #f9a8d4 30.2% 31.4%, #1e1b4b 31.4% 43.9%, #f9a8d4 43.9% 45.1%, #1e1b4b 45.1% 56.5%, #f9a8d4 56.5% 57.7%, #1e1b4b 57.7% 67.9%, #f9a8d4 67.9% 69.1%, #1e1b4b 69.1% 77.9%, #f9a8d4 77.9% 79.1%, #1e1b4b 79.1% 86.4%, #f9a8d4 86.4% 87.6%, #1e1b4b 87.6% 93.2%, #f9a8d4 93.2% 94.4%, #1e1b4b 94.4% 97.7%, #f9a8d4 97.7% 100%)`
- Ease-in-out: myk i begge ender: `linear-gradient(90deg, #f9a8d4 0% 2.6%, #1e1b4b 2.6% 7.6%, #f9a8d4 7.6% 8.8%, #1e1b4b 8.8% 18.1%, #f9a8d4 18.1% 19.3%, #1e1b4b 19.3% 32.6%, #f9a8d4 32.6% 33.8%, #1e1b4b 33.8% 49.4%, #f9a8d4 49.4% 50.6%, #1e1b4b 50.6% 66.2%, #f9a8d4 66.2% 67.4%, #1e1b4b 67.4% 80.7%, #f9a8d4 80.7% 81.9%, #1e1b4b 81.9% 91.2%, #f9a8d4 91.2% 92.4%, #1e1b4b 92.4% 97.4%, #f9a8d4 97.4% 100%)`

Avstandsdiagrammer beregnet fra CSS-kurvene. Hver rosa linje er objektets posisjon ved ett av elleve jevnt fordelte tidspunkter. Tette linjer betyr langsomt, spredte linjer betyr raskt.

## De fire easing-variantene du faktisk trenger

CSS har navn på fem grunnkurver, og designverktøy bruker de samme ideene med lignende navn. Fire dekker nesten alle oppgaver. Den femte, `ease`, er nettleserens standard: en kurve som starter nokså raskt og roer seg mykt, omtrent som en mildere ease-out.

| Easing | CSS-kurve | Bruk til |
| --- | --- | --- |
| Ease-out | `cubic-bezier(0, 0, 0.58, 1)` | Ting som kommer inn eller vises: menyer, kort, overskrifter |
| Ease-in | `cubic-bezier(0.42, 0, 1, 1)` | Ting som går ut eller forsvinner |
| Ease-in-out | `cubic-bezier(0.42, 0, 0.58, 1)` | Ting som flytter seg fra ett sted til et annet på skjermen |
| Lineær | `cubic-bezier(0, 0, 1, 1)` | Kontinuerlige løkker, rotasjoner, fremdriftslinjer, drivende bakgrunner |

Verdiene bak CSS-nøkkelordene. Mange team bruker litt kraftigere egne kurver, men rollene er de samme.

Logikken er fysisk. Noe som kommer inn, bør allerede være i bevegelse når det vises, og så roe seg, derfor ease-out. Noe som forsvinner, bør øke farten på vei ut, derfor ease-in. Lineær bevegelse er feil for en enkelt bevegelse, men riktig for noe kontinuerlig: en løkke som senker farten i endene, ser ut til å nøle hver gang den gjentas, slik [sømløse løkker](https://gradiently.design/nb/guide/seamless-loop-video) forklarer.

## Slik fungerer cubic-bezier-kurver

Hver easing-kurve i CSS tegnes mellom to faste punkter, starten (0, 0) og slutten (1, 1). En `cubic-bezier()` legger til to kontrollpunkter som bøyer kurven. Den vannrette aksen er tid, og den loddrette er fremdrift. Tidsverdiene må ligge mellom 0 og 1, men fremdriftsverdiene kan gå utenfor, slik at bevegelsen passerer målet og kommer tilbake.

```css
/* A stronger ease-out than the keyword: quick start, long gentle settle */
.card-enter {
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Overshoot: the second y value above 1 carries it past, then back */
.badge-pop {
  transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Exits: shorter and easing in */
.card-leave {
  transition: transform 200ms cubic-bezier(0.4, 0, 1, 1);
}
```

Egne kurver i CSS. Spar bevegelse forbi målet til små, lekne øyeblikk; på store paneler føles det ustødig.

MDNs referanse til [easing-funksjoner](https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function) viser alle formene CSS godtar, inkludert `steps()` for bevegelse bilde for bilde.

## Fjærer: easing fra fysikken

En fjær bruker ikke en fast kurve og varighet. Du beskriver fysikken i stedet, vanligvis stivhet (hvor sterkt den trekker mot målet), demping (hvor raskt den roer seg) og masse, og bevegelsen følger derfra. Stive, godt dempede fjærer virker raske og presise; løse, svakt dempede fjærer spretter. Fjærer er populære i appgrensesnitt fordi de reagerer naturlig når en bevegelse avbrytes halvveis.

Mange animasjonsbiblioteker tilbyr fjærer direkte. I ren CSS kan funksjonen `linear()` etterligne en ved å liste opp punkter langs banen, noe moderne nettlesere støtter.

```css
/* A simple spring-like settle: past the target, back, then rest */
.sheet-open {
  transition: transform 500ms
    linear(0, 0.6 20%, 1.08 45%, 0.98 70%, 1);
}
```

`linear()` forbinder punktene med rette segmenter. Flere punkter gir en jevnere kurve; generatorer kan beregne dem fra fjærinnstillinger.

## Easing og varighet virker sammen

Samme kurve føles ulik med ulik varighet. En ease-out over 150 millisekunder virker som et raskt rykk; over 800 virker den som en langsom glidning. Tilpass begge til avstanden og oppgaven. [Prinsipper for bevegelsesdesign](https://gradiently.design/nb/guide/motion-design-principles) viser typiske varigheter.

### Vanlige feil

- Lineær bevegelse når en meny eller et kort kommer inn
- Ease-in på ting som vises, slik at de starter tregt
- Den samme lange varigheten for små og store bevegelser
- Sprett forbi målet på alt
- Easing i endene av en kontinuerlig løkke

### Bedre

- Ease-out for alt som kommer inn
- Ease-in med litt kortere varighet for alt som går ut
- Kort for små bevegelser, lengre for større
- Bevegelse forbi målet spart til små, lekne øyeblikk
- Lineær bevegelse for løkker, så de aldri nøler

## Easing i JavaScript, designverktøy og video

De samme kurvene fungerer utenfor CSS. I JavaScript tar Web Animations API imot en CSS-easingstreng. Design- og videoverktøy bruker de samme ideene under navn som ease in, ease out og ease in and out, vanligvis med en grafeditor for egne kurver og, i mange prototypeverktøy, forhåndsinnstilte fjærer.

```js
const card = document.querySelector('.card')

card.animate(
  [
    { transform: 'translateY(24px)', opacity: 0 },
    { transform: 'translateY(0)', opacity: 1 },
  ],
  { duration: 300, easing: 'cubic-bezier(0.16, 1, 0.3, 1)', fill: 'both' },
)
```

En inngang med easing gjennom Web Animations API, med samme kurve som CSS-en over.

Uansett kurve foretrekker noen mindre bevegelse. Respekter innstillingen deres ved å forkorte eller fjerne bevegelse; [redusert bevegelse](https://gradiently.design/nb/guide/reduced-motion) viser hvordan. For løkkebakgrunner, der lineær bevegelse vanligvis er riktig, se [animerte gradientbakgrunner](https://gradiently.design/nb/guide/animated-gradient-background).

## FAQ

### Hva er easing i animasjon?

Easing er måten farten i en bevegelse endres underveis. I stedet for konstant fart øker eller senker bevegelsen farten, eller begge deler, noe som ser mer naturlig ut.

### Hva er forskjellen mellom ease-in og ease-out?

Ease-in starter langsomt og øker farten, noe som passer ting som går ut. Ease-out starter raskt og bremser ned, noe som passer ting som kommer inn.

### Når bør jeg bruke lineær easing?

Til kontinuerlig bevegelse som løkker, rotasjoner, fremdriftslinjer og langsomt drivende bakgrunner. Ved enkeltbevegelser virker det mekanisk.

### Hva betyr cubic-bezier i CSS?

Det definerer en easing-kurve med to kontrollpunkter mellom fast start og slutt. Tidsverdiene holder seg mellom 0 og 1, mens fremdriftsverdier utenfor intervallet gir bevegelse forbi målet.

### Hva er fjæranimasjon?

Bevegelse beskrevet med fysiske innstillinger som stivhet, demping og masse i stedet for en fast kurve. CSS kan etterligne fjærer med easing-funksjonen linear().