# Easing erklärt: warum gute Bewegung natürlich wirkt

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

Dieselbe Bewegung kann ungelenk oder mühelos wirken, je nach einer einzigen Einstellung. Diese Einstellung heißt Easing, und ein paar einfache Regeln decken fast jeden Fall ab.

## The short version

- Easing beschreibt, wie sich das Tempo einer Bewegung über ihre Dauer ändert, statt von Anfang bis Ende konstant zu bleiben.
- Ease-out beginnt schnell und wird langsamer, was zu Dingen passt, die hereinkommen, Ease-in beginnt langsam und wird schneller, was zu Dingen passt, die verschwinden.
- Lineare Bewegung mit konstantem Tempo wirkt bei einzelnen Bewegungen mechanisch, ist aber für kontinuierliche Schleifen und Drehungen richtig.
- Eine Cubic-Bezier-Kurve definiert jedes Easing mit zwei Kontrollpunkten, und Werte außerhalb von 0 bis 1 erzeugen ein Überschwingen.
- Federn beschreiben Bewegung mit physikalischen Einstellungen wie Steifheit und Dämpfung, und CSS kann sie mit der Funktion linear() annähern.

**Easing** beschreibt, wie sich das Tempo einer Bewegung während ihres Ablaufs ändert. Ohne Easing bewegt sich ein Objekt mit einem konstanten Tempo und stoppt abrupt, was mechanisch wirkt. Mit Easing beschleunigt und bremst es, wie es echte Dinge tun: Eine Schublade gleitet schnell heraus und kommt zur Ruhe, ein Ball wird beim Fallen schneller. Das richtige Easing zu wählen ist der schnellste Weg, jede Animation natürlich wirken zu lassen.

## Wie Easing aussieht

Animatoren zeichnen Easing als Abstandsdiagramm: wo ein Objekt in gleichen Zeitschritten steht. Sind die Markierungen gleichmäßig verteilt, ist das Tempo konstant. Drängen sie sich zusammen, bewegt sich das Objekt langsam, liegen sie weit auseinander, bewegt es sich schnell. Hier sind die vier grundlegenden Easings, jedes mit elf gleichen Momenten derselben Bewegung von links nach rechts.

- Linear: gleichmäßige Abstände: `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: langsamer Start, schnelles Ende: `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: schneller Start, sanftes Ende: `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: sanft an beiden Enden: `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%)`

Abstandsdiagramme, aus den CSS-Kurven berechnet. Jede rosa Linie ist die Position des Objekts in einem von elf gleichen Momenten. Gedrängte Linien heißen langsam, weite Linien schnell.

## Die vier Easings, die du wirklich brauchst

CSS benennt fünf Grundkurven, und Design-Tools nutzen dieselben Ideen unter ähnlichen Namen. Vier davon decken fast jede Aufgabe ab. Die fünfte, `ease`, ist der Browser-Standard: eine Kurve, die ziemlich schnell startet und sanft ausläuft, ähnlich einem weicheren Ease-out.

| Easing | CSS-Kurve | Einsatz für |
| --- | --- | --- |
| Ease-out | `cubic-bezier(0, 0, 0.58, 1)` | Dinge, die hereinkommen oder erscheinen: Menüs, Karten, Überschriften |
| Ease-in | `cubic-bezier(0.42, 0, 1, 1)` | Dinge, die verschwinden oder ausgehen |
| Ease-in-out | `cubic-bezier(0.42, 0, 0.58, 1)` | Dinge, die sich auf dem Bildschirm von einem Ort zum anderen bewegen |
| Linear | `cubic-bezier(0, 0, 1, 1)` | Kontinuierliche Schleifen, Drehungen, Fortschrittsbalken, Hintergrunddrift |

Die CSS-Schlüsselwörter. Viele Teams nutzen etwas stärkere eigene Kurven, aber die Rollen bleiben gleich.

Die Logik ist physikalisch. Etwas, das ankommt, sollte sich beim Erscheinen schon bewegen und dann zur Ruhe kommen, also Ease-out. Etwas, das geht, sollte im Gehen Tempo aufnehmen, also Ease-in. Linear ist falsch für eine einzelne Bewegung, aber richtig für alles Kontinuierliche: Eine Schleife, die an ihren Enden abbremst, scheint bei jeder Wiederholung zu zögern, wie [nahtlose Schleifen](https://gradiently.design/de/guide/seamless-loop-video) erklärt.

## So funktionieren Cubic-Bezier-Kurven

Jede CSS-Easing-Kurve wird zwischen zwei festen Punkten gezeichnet, dem Start (0, 0) und dem Ende (1, 1). Ein `cubic-bezier()` fügt zwei Kontrollpunkte hinzu, die die Kurve biegen. Die waagerechte Achse ist die Zeit, die senkrechte der Fortschritt. Die Zeitwerte müssen zwischen 0 und 1 bleiben, Fortschrittswerte dürfen darüber hinausgehen, wodurch eine Bewegung ihr Ziel überschwingt und zurückkommt.

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

Eigene Kurven in CSS. Spare dir das Überschwingen für kleine, verspielte Momente, bei großen Panels wirkt es wackelig.

MDNs Referenz zu [Easing-Funktionen](https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function) listet jede Form auf, die CSS akzeptiert, einschließlich `steps()` für Bewegung Bild für Bild.

## Federn: Easing aus der Physik

Eine Feder nutzt keine feste Kurve und Dauer. Du beschreibst stattdessen die Physik, meist Steifheit (wie stark sie zum Ziel zieht), Dämpfung (wie schnell sie sich beruhigt) und Masse, und die Bewegung folgt daraus. Steife, gut gedämpfte Federn wirken knackig und präzise, lockere, leicht gedämpfte federn nach. Federn sind in App-Oberflächen beliebt, weil sie natürlich reagieren, wenn eine Bewegung mittendrin unterbrochen wird.

Viele Animationsbibliotheken bieten Federn direkt an. In reinem CSS kann die Funktion `linear()` eine annähern, indem sie Punkte entlang ihres Wegs auflistet, was moderne Browser unterstützen.

```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()` verbindet die Punkte mit geraden Segmenten. Mehr Punkte ergeben eine glattere Kurve, Generatoren können sie aus Federeinstellungen berechnen.

## Easing und Dauer wirken zusammen

Dieselbe Kurve fühlt sich bei unterschiedlicher Länge anders an. Ein Ease-out über 150 Millisekunden wirkt wie ein knackiges Einrasten, über 800 wie ein langsames Gleiten. Stimme beides auf Strecke und Aufgabe ab. [Prinzipien des Motion Designs](https://gradiently.design/de/guide/motion-design-principles) nennt typische Dauern.

### Häufige Fehler

- Lineare Bewegung für ein hereinkommendes Menü oder eine Karte
- Ease-in bei Dingen, die erscheinen, sodass sie träge starten
- Dieselbe lange Dauer für kleine und große Bewegungen
- Federndes Überschwingen bei allem
- Easing an den Enden einer kontinuierlichen Schleife

### Besser

- Ease-out für alles, was ankommt
- Ease-in, etwas kürzer, für alles, was geht
- Kurz für kleine Bewegungen, länger für größere
- Überschwingen für kleine, verspielte Momente aufsparen
- Linear für Schleifen, damit sie nie zögern

## Easing in JavaScript, Design-Tools und Video

Dieselben Kurven funktionieren außerhalb von CSS. In JavaScript nimmt die Web Animations API einen CSS-Easing-String. Design- und Videotools nutzen dieselben Ideen unter Namen wie Ease In, Ease Out und Ease In und Out, meist mit einem Graph-Editor für eigene Kurven und in vielen Prototyping-Tools mit Feder-Voreinstellungen.

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

Ein Easing-Auftritt mit der Web Animations API, mit derselben Kurve wie im CSS oben.

Egal welche Kurve, manche Menschen bevorzugen weniger Bewegung. Respektiere ihre Einstellung, indem du Bewegung verkürzt oder entfernst, [reduzierte Bewegung](https://gradiently.design/de/guide/reduced-motion) zeigt, wie. Und für Hintergründe in Schleife, wo linear meist richtig ist, siehe [animierte Farbverlauf-Hintergründe](https://gradiently.design/de/guide/animated-gradient-background).

## FAQ

### Was ist Easing in der Animation?

Easing ist die Art, wie sich das Tempo einer Bewegung über ihre Dauer ändert. Statt mit konstantem Tempo zu laufen, beschleunigt eine Bewegung mit Easing, bremst oder beides, was natürlicher wirkt.

### Was ist der Unterschied zwischen Ease-in und Ease-out?

Ease-in beginnt langsam und wird schneller, was zu Dingen passt, die verschwinden. Ease-out beginnt schnell und wird langsamer, was zu Dingen passt, die hereinkommen.

### Wann sollte ich lineares Easing nutzen?

Für kontinuierliche Bewegung wie Schleifen, Drehungen, Fortschrittsbalken und langsame Hintergrunddrift. Bei einzelnen Bewegungen wirkt es mechanisch.

### Was bedeutet cubic-bezier in CSS?

Es definiert eine Easing-Kurve mit zwei Kontrollpunkten zwischen dem festen Start und Ende. Zeitwerte bleiben zwischen 0 und 1, während Fortschrittswerte darüber hinaus ein Überschwingen erzeugen.

### Was ist Federanimation?

Bewegung, die durch physikalische Einstellungen wie Steifheit, Dämpfung und Masse statt durch eine feste Kurve beschrieben wird. CSS kann Federn mit der Easing-Funktion linear() annähern.