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

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.

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.

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 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.

/* 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);
}

MDNs Referenz zu Easing-Funktionen 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.

/* 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);
}

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 nennt typische Dauern.

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.

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

Egal welche Kurve, manche Menschen bevorzugen weniger Bewegung. Respektiere ihre Einstellung, indem du Bewegung verkürzt oder entfernst, reduzierte Bewegung zeigt, wie. Und für Hintergründe in Schleife, wo linear meist richtig ist, siehe animierte Farbverlauf-Hintergründe.