# Easing forklaret: derfor føles god bevægelse naturlig

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

Den samme bevægelse kan føles klodset eller ubesværet afhængigt af én indstilling. Den hedder easing, og nogle få enkle regler dækker næsten alle tilfælde.

## The short version

- Easing beskriver, hvordan en bevægelses hastighed ændrer sig undervejs frem for at være konstant fra start til slut.
- Ease-out starter hurtigt og bremser, hvilket passer til elementer, der kommer ind. Ease-in starter langsomt og accelererer, hvilket passer til elementer, der forlader skærmen.
- Lineær bevægelse med konstant hastighed virker mekanisk ved enkeltbevægelser, men passer til kontinuerlige loops og rotationer.
- En cubic-bezier-kurve definerer easing med to kontrolpunkter, og værdier uden for 0 til 1 skaber bevægelse forbi målet.
- Fjedre beskriver bevægelse med fysiske indstillinger som stivhed og dæmpning, og CSS kan tilnærme dem med funktionen linear().

**Easing** er den måde, en bevægelses hastighed ændrer sig på undervejs. Uden easing bevæger et objekt sig med konstant hastighed og stopper brat, hvilket virker mekanisk. Med easing accelererer og bremser det som virkelige ting: en skuffe glider hurtigt ud og falder til ro, en bold får fart på, mens den falder. Den rette easing er den hurtigste vej til at få en animation til at føles naturlig.

## Sådan ser easing ud

Animatorer viser easing som et afstandsdiagram: hvor et objekt befinder sig ved lige store tidsintervaller. Når markeringerne er jævnt fordelt, er hastigheden konstant. Når de ligger tæt, bevæger objektet sig langsomt. Når der er langt mellem dem, bevæger det sig hurtigt. Her er de fire grundtyper, som hver viser elleve jævnt fordelte tidspunkter i samme bevægelse fra venstre mod højre.

- Lineær: jævn afstand: `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, hurtig slutning: `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: hurtig start, blødt stop: `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: blød 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%)`

Afstandsdiagrammer beregnet ud fra CSS-kurverne. Hver lyserød linje viser objektets position ved ét af elleve jævnt fordelte tidspunkter. Tætte linjer betyder langsomt, spredte linjer hurtigt.

## De fire typer easing, du har brug for

CSS har navne på fem grundkurver, og designværktøjer bruger de samme idéer under lignende navne. Fire af dem dækker næsten alle opgaver. Den femte, `ease`, er browserens standard: en kurve, der starter ret hurtigt og falder blidt til ro, omtrent som en blødere ease-out.

| Easing | CSS-kurve | Brug den til |
| --- | --- | --- |
| Ease-out | `cubic-bezier(0, 0, 0.58, 1)` | Elementer, der kommer ind eller bliver synlige: menuer, kort, overskrifter |
| Ease-in | `cubic-bezier(0.42, 0, 1, 1)` | Elementer, der forlader skærmen eller forsvinder |
| Ease-in-out | `cubic-bezier(0.42, 0, 0.58, 1)` | Elementer, der flytter sig fra ét sted til et andet på skærmen |
| Lineær | `cubic-bezier(0, 0, 1, 1)` | Kontinuerlige loops, rotationer, statusbjælker, glidende baggrunde |

Værdierne bag CSS-nøgleordene. Mange teams bruger lidt kraftigere, tilpassede kurver, men rollerne er de samme.

Logikken er fysisk. Noget, der ankommer, skal allerede være i bevægelse, når det bliver synligt, og så falde til ro. Derfor bruger det ease-out. Noget, der forlader skærmen, skal samle fart undervejs og bruger derfor ease-in. Lineær bevægelse er forkert til en enkelt bevægelse, men rigtig til alt kontinuerligt: et loop med easing i enderne ser ud til at tøve, hver gang det gentages, som [sømløse loops](https://gradiently.design/da/guide/seamless-loop-video) forklarer.

## Sådan virker cubic-bezier-kurver

Hver easingkurve i CSS tegnes mellem to faste punkter: starten (0, 0) og slutningen (1, 1). `cubic-bezier()` tilføjer to kontrolpunkter, som bøjer kurven. Den vandrette akse er tid, og den lodrette er fremdrift. Tidsværdierne skal ligge mellem 0 og 1, men fremdriftsværdierne kan gå ud over intervallet, så bevægelsen passerer målet og vender tilbage.

```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);
}
```

Tilpassede kurver i CSS. Gem bevægelse forbi målet til små, legende øjeblikke. På store paneler føles det vaklende.

MDN’s reference til [easingfunktioner](https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function) viser alle former, CSS accepterer, herunder `steps()` til bevægelse billede for billede.

## Fjedre: easing ud fra fysik

En fjeder bruger ikke en fast kurve og varighed. I stedet beskriver du fysikken, typisk stivhed, som er styrken af trækket mod målet, dæmpning, som er hvor hurtigt den falder til ro, og masse. Bevægelsen følger deraf. Stive, veldæmpede fjedre føles hurtige og præcise, mens løse fjedre med let dæmpning hopper. Fjedre er populære i appgrænseflader, fordi de reagerer naturligt, når en bevægelse afbrydes halvvejs.

Mange animationsbiblioteker tilbyder fjedre direkte. I ren CSS kan funktionen `linear()` tilnærme en fjeder ved at angive punkter langs dens bane, hvilket moderne browsere understø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 punkterne med rette linjestykker. Flere punkter giver en glattere kurve. Generatorer kan beregne dem ud fra fjederindstillinger.

## Easing og varighed arbejder sammen

Den samme kurve føles forskellig ved forskellige varigheder. En ease-out over 150 millisekunder opleves som et kontant ryk. Over 800 føles den som en langsom gliden. Tilpas begge dele til afstanden og opgaven. [Principper for motion design](https://gradiently.design/da/guide/motion-design-principles) har typiske varigheder.

### Almindelige fejl

- Lineær bevægelse til en menu eller et kort, der kommer ind
- Ease-in til elementer, der vises, så de starter trægt
- Samme lange varighed til små og store bevægelser
- Hoppende bevægelse forbi målet på alt
- Easing i enderne af et kontinuerligt loop

### Bedre

- Ease-out til alt, der kommer ind
- Ease-in med lidt kortere varighed til alt, der forlader skærmen
- Kort tid til små bevægelser, længere til store
- Bevægelse forbi målet gemt til små, legende øjeblikke
- Lineær bevægelse til loops, så de aldrig tøver

## Easing i JavaScript, designværktøjer og video

De samme kurver virker uden for CSS. I JavaScript modtager Web Animations API en CSS-easingstreng. Design- og videoværktøjer bruger de samme idéer under navne som ease in, ease out og ease in and out, typisk med en kurveeditor til egne kurver og i mange prototypeværktøjer forudindstillinger til fjedre.

```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 indgang med easing via Web Animations API med samme kurve som CSS-eksemplet ovenfor.

Uanset kurven foretrækker nogle mindre bevægelse. Respektér deres indstilling ved at forkorte eller fjerne bevægelsen. [Reduceret bevægelse](https://gradiently.design/da/guide/reduced-motion) viser hvordan. Se [animerede gradientbaggrunde](https://gradiently.design/da/guide/animated-gradient-background) for baggrunde i loop, hvor lineær bevægelse normalt er rigtig.

## FAQ

### Hvad er easing i animation?

Easing er den måde, hastigheden ændrer sig på under en bevægelse. I stedet for konstant hastighed accelererer bevægelsen, bremser eller begge dele, hvilket virker mere naturligt.

### Hvad er forskellen på ease-in og ease-out?

Ease-in starter langsomt og accelererer, hvilket passer til elementer, der forlader skærmen. Ease-out starter hurtigt og bremser, hvilket passer til elementer, der kommer ind.

### Hvornår skal jeg bruge lineær easing?

Til kontinuerlig bevægelse som loops, rotationer, statusbjælker og langsomt glidende baggrunde. Ved enkelte bevægelser virker den mekanisk.

### Hvad betyder cubic-bezier i CSS?

Den definerer en easingkurve med to kontrolpunkter mellem den faste start og slutning. Tidsværdierne holder sig mellem 0 og 1, mens fremdriftsværdier uden for intervallet skaber bevægelse forbi målet.

### Hvad er fjederanimation?

Bevægelse beskrevet med fysiske indstillinger som stivhed, dæmpning og masse frem for en fast kurve. CSS kan tilnærme fjedre med easingfunktionen linear().