# Easing förklarat: därför känns bra rörelse naturlig

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

Samma rörelse kan kännas klumpig eller lätt beroende på en enda inställning. Den inställningen är easing, och några enkla regler täcker nästan alla fall.

## The short version

- Easing beskriver hur farten i en rörelse förändras under dess förlopp, i stället för att förbli konstant från start till slut.
- Ease-out börjar snabbt och saktar ner, vilket passar det som kommer in. Ease-in börjar långsamt och ökar farten, vilket passar det som lämnar.
- Linjär rörelse, med konstant fart, ser mekanisk ut för enstaka rörelser men är rätt för kontinuerliga loopar och rotationer.
- En cubic-bezier-kurva definierar vilken easing som helst med två kontrollpunkter, och värden utanför 0 till 1 ger överskjutning.
- Fjädrar beskriver rörelse med fysiska inställningar som styvhet och dämpning, och CSS kan approximera dem med funktionen linear().

**Easing** är hur farten i en rörelse förändras medan den spelas. Utan easing rör sig ett föremål med en enda jämn fart och stannar tvärt, vilket ser mekaniskt ut. Med easing accelererar och bromsar det som riktiga saker gör: en låda glider ut snabbt och lägger sig till rätta, en boll ökar farten när den faller. Att välja rätt easing är det snabbaste sättet att få vilken animation som helst att kännas naturlig.

## Hur easing ser ut

Animatörer ritar easing som ett avståndsdiagram: var ett föremål befinner sig vid lika stora tidssteg. När märkena ligger jämnt är farten konstant. När de klumpar ihop sig rör sig föremålet långsamt, och när de sprids ut rör det sig snabbt. Här är de fyra grundläggande formerna av easing, var och en med elva lika stora ögonblick av samma rörelse från vänster till höger.

- Linjär: jämnt avstånd: `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: långsam start, snabbt slut: `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: snabb start, mjukt 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: mjukt i båda ändar: `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%)`

Avståndsdiagram beräknade från CSS-kurvorna. Varje rosa linje är föremålets position vid ett av elva lika stora ögonblick. Hopklumpade linjer betyder långsamt, utspridda linjer betyder snabbt.

## De fyra easingsätt du faktiskt behöver

CSS namnger fem grundkurvor, och designverktyg använder samma idéer under liknande namn. Fyra av dem täcker nästan alla uppgifter. Den femte, `ease`, är webbläsarens standard: en kurva som börjar ganska snabbt och landar mjukt, ungefär som en mildare ease-out.

| Easing | CSS-kurva | Använd den till |
| --- | --- | --- |
| Ease-out | `cubic-bezier(0, 0, 0.58, 1)` | Sådant som kommer in eller dyker upp: menyer, kort, rubriker |
| Ease-in | `cubic-bezier(0.42, 0, 1, 1)` | Sådant som lämnar eller försvinner |
| Ease-in-out | `cubic-bezier(0.42, 0, 0.58, 1)` | Sådant som flyttas från en plats till en annan på skärmen |
| Linjär | `cubic-bezier(0, 0, 1, 1)` | Kontinuerliga loopar, rotationer, förloppsindikatorer, bakgrundsdrift |

CSS:s nyckelordsvärden. Många team använder något kraftigare egna kurvor, men rollerna är desamma.

Logiken är fysisk. Något som kommer in ska redan röra sig när det dyker upp och sedan lägga sig till rätta, så det använder ease-out. Något som lämnar ska samla fart på vägen ut, så det använder ease-in. Linjärt är fel för en enstaka rörelse men rätt för allt kontinuerligt: en loop som mjukar upp sina ändar verkar tveka varje gång den upprepas, som [sömlösa loopar](https://gradiently.design/sv/guide/seamless-loop-video) förklarar.

## Hur cubic-bezier-kurvor fungerar

Varje CSS-easingkurva dras mellan två fasta punkter, starten (0, 0) och slutet (1, 1). En `cubic-bezier()` lägger till två kontrollpunkter som böjer kurvan. Den vågräta axeln är tid och den lodräta är förlopp. Tidsvärdena måste ligga mellan 0 och 1, men förloppsvärdena kan gå utanför, vilket får en rörelse att skjuta över sitt mål och komma tillbaka.

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

Egna kurvor i CSS. Spara överskjutning till små, lekfulla rörelser. På stora paneler känns det ostadigt.

MDN:s referens för [easingfunktioner](https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function) listar alla former CSS accepterar, inklusive `steps()` för bild-för-bild-rörelse.

## Fjädrar: easing från fysiken

En fjäder använder inte en fast kurva och varaktighet. I stället beskriver du fysiken, oftast styvhet (hur kraftigt den drar mot målet), dämpning (hur snabbt den lugnar sig) och massa, och rörelsen följer av det. Styva, väl dämpade fjädrar känns snärtiga och exakta. Lösa, lätt dämpade fjädrar studsar. Fjädrar är populära i appgränssnitt eftersom de reagerar naturligt när en rörelse avbryts halvvägs.

Många animationsbibliotek erbjuder fjädrar direkt. I vanlig CSS kan funktionen `linear()` approximera en genom att lista punkter längs dess bana, vilket moderna webbläsare stöder.

```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()` förbinder punkterna med raka sträckor. Fler punkter ger en mjukare kurva, och generatorer kan räkna fram dem från fjäderinställningar.

## Easing och varaktighet hör ihop

Samma kurva känns olika vid olika längd. En ease-out över 150 millisekunder läses som ett skarpt knäpp, över 800 som ett långsamt glid. Anpassa båda efter sträckan och uppgiften. [Principer för rörelsedesign](https://gradiently.design/sv/guide/motion-design-principles) har typiska varaktigheter.

### Vanliga misstag

- Linjär rörelse när en meny eller ett kort kommer in
- Ease-in på sådant som dyker upp, så att det startar trögt
- Samma långa varaktighet för små och stora rörelser
- Studsande överskjutning på allt
- Easing i ändarna av en kontinuerlig loop

### Bättre

- Ease-out för allt som kommer in
- Ease-in, något kortare, för allt som lämnar
- Kort för små rörelser, längre för större
- Överskjutning sparad till små, lekfulla rörelser
- Linjärt för loopar, så att de aldrig tvekar

## Easing i JavaScript, designverktyg och video

Samma kurvor fungerar utanför CSS. I JavaScript tar Web Animations API en CSS-easingsträng. Design- och videoverktyg använder samma idéer under namn som ease in, ease out och ease in and out, oftast med en grafredigerare för egna kurvor och, i många prototypverktyg, fjäderförinställningar.

```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 lättad ingång med Web Animations API, med samma kurva som i CSS-koden ovan.

Vilken kurva du än väljer föredrar vissa människor mindre rörelse. Respektera deras inställning genom att korta ner eller ta bort rörelse. [Minskad rörelse](https://gradiently.design/sv/guide/reduced-motion) visar hur. Och för loopande bakgrunder, där linjärt oftast är rätt, se [animerade gradientbakgrunder](https://gradiently.design/sv/guide/animated-gradient-background).

## FAQ

### Vad är easing i animation?

Easing är hur farten i en rörelse förändras under dess förlopp. I stället för att röra sig med jämn fart accelererar eller bromsar en rörelse med easing, eller båda, vilket ser mer naturligt ut.

### Vad är skillnaden mellan ease-in och ease-out?

Ease-in börjar långsamt och ökar farten, vilket passar det som lämnar. Ease-out börjar snabbt och saktar ner, vilket passar det som kommer in.

### När ska jag använda linjär easing?

För kontinuerlig rörelse som loopar, rotationer, förloppsindikatorer och långsam bakgrundsdrift. För enstaka rörelser ser den mekanisk ut.

### Vad betyder cubic-bezier i CSS?

Den definierar en easingkurva med två kontrollpunkter mellan den fasta starten och det fasta slutet. Tidsvärdena ligger mellan 0 och 1, medan förloppsvärden utanför det området ger överskjutning.

### Vad är fjäderanimation?

Rörelse som beskrivs med fysiska inställningar som styvhet, dämpning och massa i stället för en fast kurva. CSS kan approximera fjädrar med easingfunktionen linear().