# Easing uitgelegd: waarom goede beweging natuurlijk voelt

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

Dezelfde beweging kan onhandig of moeiteloos voelen, afhankelijk van één instelling. Die instelling heet easing, en een paar simpele regels dekken bijna elk geval.

## The short version

- Easing beschrijft hoe de snelheid van een beweging over de duur verandert, in plaats van van begin tot eind constant te blijven.
- Ease-out begint snel en vertraagt, wat past bij dingen die binnenkomen; ease-in begint langzaam en versnelt, wat past bij dingen die vertrekken.
- Lineaire beweging, met constante snelheid, ziet er bij losse bewegingen mechanisch uit, maar is juist bij doorlopende loops en rotaties.
- Een cubic-bezier-curve beschrijft elke easing met twee controlepunten, en waarden buiten 0 tot 1 geven overshoot.
- Springs beschrijven beweging met fysieke instellingen zoals stijfheid en demping, en CSS kan ze benaderen met de functie linear().

**Easing** is hoe de snelheid van een beweging verandert terwijl hij wordt afgespeeld. Zonder easing beweegt een voorwerp met één constante snelheid en stopt het abrupt, wat mechanisch oogt. Met easing versnelt en vertraagt het zoals echte dingen doen: een lade schuift snel uit en komt tot rust, een bal versnelt terwijl hij valt. De juiste easing kiezen is de snelste manier om elke animatie natuurlijk te laten voelen.

## Hoe easing eruitziet

Animators tekenen easing als een spatiëringsschema: waar een voorwerp zich bevindt op gelijke tijdstappen. Staan de streepjes gelijkmatig verdeeld, dan is de snelheid constant. Staan ze dicht op elkaar, dan beweegt het voorwerp langzaam; staan ze ver uit elkaar, dan beweegt het snel. Hier zijn de vier basiseasings, elk met elf gelijke momenten van dezelfde beweging van links naar rechts.

- Lineair: gelijkmatige verdeling: `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: trage start, snel einde: `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: snelle start, zachte 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: zacht aan beide kanten: `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%)`

Spatiëringsschema’s berekend uit de CSS-curves. Elke roze lijn is de positie van het voorwerp op een van elf gelijke momenten. Dicht opeen staande lijnen betekenen langzaam, ver uit elkaar staande snel.

## De vier easings die je echt nodig hebt

CSS kent vijf basiscurves, en ontwerptools gebruiken dezelfde ideeën onder vergelijkbare namen. Vier ervan dekken bijna elke klus. De vijfde, `ease`, is de standaard van de browser: een curve die vrij snel begint en zacht tot rust komt, ongeveer als een zachtere ease-out.

| Easing | CSS-curve | Gebruik voor |
| --- | --- | --- |
| Ease-out | `cubic-bezier(0, 0, 0.58, 1)` | Dingen die binnenkomen of verschijnen: menu’s, kaarten, koppen |
| Ease-in | `cubic-bezier(0.42, 0, 1, 1)` | Dingen die vertrekken of verdwijnen |
| Ease-in-out | `cubic-bezier(0.42, 0, 0.58, 1)` | Dingen die op het scherm van de ene plek naar de andere gaan |
| Lineair | `cubic-bezier(0, 0, 1, 1)` | Doorlopende loops, rotaties, voortgangsbalken, drift van achtergronden |

De CSS-sleutelwoordwaarden. Veel teams gebruiken iets sterkere eigen curves, maar de rollen blijven gelijk.

De logica is fysiek. Iets wat aankomt beweegt al als het verschijnt en komt dan tot rust, dus het krijgt een ease-out. Iets wat vertrekt moet snelheid winnen terwijl het gaat, dus het krijgt een ease-in. Lineair is fout voor een losse beweging, maar goed voor alles wat doorloopt: een loop die aan zijn uiteinden easing heeft lijkt elke keer dat hij herhaalt te aarzelen, zoals [naadloze loops](https://gradiently.design/nl/guide/seamless-loop-video) uitlegt.

## Hoe cubic-bezier-curves werken

Elke CSS-easingcurve wordt getekend tussen twee vaste punten, het begin (0, 0) en het einde (1, 1). Een `cubic-bezier()` voegt twee controlepunten toe die de curve buigen. De horizontale as is tijd en de verticale as is voortgang. De tijdwaarden moeten tussen 0 en 1 blijven, maar voortgangswaarden mogen erbuiten, waardoor een beweging zijn doel voorbijschiet en terugkomt.

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

Eigen curves in CSS. Bewaar overshoot voor kleine, speelse momenten; op grote panelen voelt het wiebelig.

De referentie van MDN over [easingfuncties](https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function) toont elke vorm die CSS accepteert, inclusief `steps()` voor beweging beeld voor beeld.

## Springs: easing uit de natuurkunde

Een spring gebruikt geen vaste curve en duur. Je beschrijft in plaats daarvan de natuurkunde, meestal stijfheid (hoe sterk hij naar het doel trekt), demping (hoe snel hij tot rust komt) en massa, en de beweging volgt. Stijve, goed gedempte springs voelen scherp en precies; losse, licht gedempte veren stuiteren. Springs zijn populair in app-interfaces omdat ze natuurlijk reageren als een beweging halverwege wordt onderbroken.

Veel animatiebibliotheken bieden springs direct aan. In gewone CSS kan de functie `linear()` er een benaderen door punten langs zijn pad op te sommen, wat moderne browsers ondersteunen.

```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()` verbindt de punten met rechte stukken. Meer punten geven een gladdere curve; generatoren kunnen ze berekenen uit spring-instellingen.

## Easing en duur werken samen

Dezelfde curve voelt anders bij verschillende lengtes. Een ease-out over 150 milliseconden leest als een scherpe klik; over 800 leest hij als een langzaam glijden. Stem beide af op de afstand en de taak. [Principes van bewegingsontwerp](https://gradiently.design/nl/guide/motion-design-principles) heeft gangbare duren.

### Veelgemaakte fouten

- Lineaire beweging voor een menu of kaart die binnenkomt
- Ease-in op dingen die verschijnen, waardoor ze traag beginnen
- Dezelfde lange duur voor kleine en grote bewegingen
- Stuiterende overshoot op alles
- Easing aan de uiteinden van een doorlopende loop

### Beter

- Ease-out voor alles wat aankomt
- Ease-in, iets korter, voor alles wat vertrekt
- Kort voor kleine bewegingen, langer voor grotere
- Overshoot bewaard voor kleine, speelse momenten
- Lineair voor loops, zodat ze nooit aarzelen

## Easing in JavaScript, ontwerptools en video

Dezelfde curves werken buiten CSS. In JavaScript accepteert de Web Animations API een CSS-easingstring. Ontwerp- en videotools gebruiken dezelfde ideeën onder namen als ease in, ease out en ease in and out, meestal met een grafiekeditor voor eigen curves en, in veel prototypetools, spring-presets.

```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' },
)
```

Een entree met easing met de Web Animations API, met dezelfde curve als de CSS hierboven.

Welke curve je ook kiest, sommige mensen willen liever minder beweging. Respecteer hun instelling door beweging te verkorten of weg te laten; [beperkte beweging](https://gradiently.design/nl/guide/reduced-motion) laat zien hoe. En voor loopende achtergronden, waar lineair meestal goed is, zie [geanimeerde kleurverloopachtergronden](https://gradiently.design/nl/guide/animated-gradient-background).

## FAQ

### Wat is easing in animatie?

Easing is de manier waarop de snelheid van een beweging over zijn duur verandert. In plaats van met constante snelheid te bewegen versnelt, vertraagt of beide een beweging met easing, wat natuurlijker oogt.

### Wat is het verschil tussen ease-in en ease-out?

Ease-in begint langzaam en versnelt, wat past bij dingen die vertrekken. Ease-out begint snel en vertraagt, wat past bij dingen die binnenkomen.

### Wanneer gebruik ik lineaire easing?

Voor doorlopende beweging zoals loops, rotaties, voortgangsbalken en langzame drift van achtergronden. Bij losse bewegingen ziet het er mechanisch uit.

### Wat betekent cubic-bezier in CSS?

Het definieert een easingcurve met twee controlepunten tussen het vaste begin en einde. Tijdwaarden blijven tussen 0 en 1, terwijl voortgangswaarden buiten dat bereik overshoot geven.

### Wat is springanimatie?

Beweging beschreven met fysieke instellingen zoals stijfheid, demping en massa in plaats van een vaste curve. CSS kan springs benaderen met de easingfunctie linear().