Eine Animation wirkt erst dann natürlich, wenn ihr Timing stimmt. Easing-Kurven bestimmen, wie sich eine Bewegung über die Zeit beschleunigt und abbremst. Dieser Leitfaden erklärt die wichtigsten Kurven und wie du sie in React und CSS nutzt.
- Ohne Easing wirkt jede Bewegung mechanisch, weil in der echten Welt nichts mit gleicher Geschwindigkeit startet und stoppt.
- Ease-Out für alles, was hereinkommt. Ease-In für alles, was verschwindet. Ease-InOut für Bewegungen mit Anfang und Ende.
- Dieselbe Kurve gehört in CSS und in JavaScript, sonst fühlt sich eine Seite uneinheitlich an.
- Kurze Dauern wirken hochwertiger als lange. 0,3 bis 0,8 Sekunden sind der brauchbare Bereich.
Was Easing bedeutet
Ohne Easing bewegt sich ein Element linear, also mit konstanter Geschwindigkeit. Das wirkt mechanisch. In der echten Welt beschleunigen und bremsen Dinge. Genau das bildet eine Easing-Kurve nach.
Technisch beschreibt eine cubic-bezier-Kurve vier Werte, die den Verlauf zwischen Start und Ziel steuern. Sie lässt sich als Kurve in einem Einheitsquadrat zeichnen.
- Wert für CSS
- cubic-bezier(0.22, 1, 0.36, 1)
- Wert für framer-motion
- [0.22, 1, 0.36, 1]
Vier Kurven zum Umschalten. Unten laufen zwei Punkte dieselbe Strecke, einmal mit Kurve und einmal ohne.
In, Out und InOut
Ease-In startet langsam und wird schneller. Gut für Bewegungen, die aus dem Bild verschwinden. Ease-Out startet schnell und läuft weich aus. Ideal für Elemente, die ins Bild kommen, weil das Ende ruhig wirkt.
Ease-InOut ist symmetrisch: langsam am Anfang und Ende, schnell in der Mitte. Passend für Bewegungen, die anfangen und wieder enden, etwa ein Panel, das auf- und zuklappt.
/* kommt herein */ transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1); /* geht hinaus */transition-timing-function: cubic-bezier(0.55, 0, 1, 0.45); /* auf und zu */transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
- Ease-In für ein Menü, das aufgeht. Es startet zäh und schnappt am Ende zu.
- Für jede Bewegung eine andere Kurve, weil gerade eine andere gefiel.
- Linear für alles, weil es die Vorgabe des Browsers ist.
- Ease-Out für alles, was erscheint. Der Anfang ist schnell, das Ende ruhig.
- Ease-In nur für das Verschwinden. Was weggeht, darf beschleunigen.
- Ease-InOut für Zustände mit Hin und Zurück, etwa ein Panel.
Kurven in framer-motion
In framer-motion gibst du die Kurve als Tupel an, zum Beispiel ease: [0.22, 1, 0.36, 1] in der transition. Diese Kurve läuft besonders weich aus und eignet sich für die meisten Einblendungen.
Halte Dauern kurz. Zwischen 0,3 und 0,8 Sekunden wirken die meisten UI-Bewegungen angenehm. Längere Zeiten fühlen sich schnell träge an.
Dieselbe Kurve, drei Zeiten. Der brauchbare Bereich ist schmaler, als man beim Bauen denkt.
const ease = [0.22, 1, 0.36, 1] as const; <motion.div initial={{ opacity: 0, y: 12 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5, ease }}/>
Drei Kurven decken den Alltag ab.
Eine Seite mit drei Kurven wirkt geordnet, eine mit zwölf wirkt zufällig. Diese drei reichen fast immer.
Kurven in CSS
In CSS nutzt du denselben Wert als transition-timing-function, zum Beispiel cubic-bezier(0.22, 1, 0.36, 1). So verhalten sich CSS-Übergänge und JavaScript-Animationen konsistent.
Eine kuratierte Sammlung von Kurven mit Vorschau und Kopierfunktion findest du in den Ressourcen der Library.
:root { --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);} .card { transition: transform 0.5s var(--ease-soft);}
Kurven, die fast immer passen
Du brauchst keine Sammlung mit vierzig Kurven. Drei decken den Alltag ab, den Rest holst du dir, wenn eine Bewegung wirklich anders sein soll.
- 0.22, 1, 0.36, 1 Läuft sehr weich aus. Die Standardwahl für Einblendungen, Karten und alles, was hereinkommt.
- 0.4, 0, 0.2, 1 Symmetrischer und etwas straffer. Passend für Panels, Menüs und Zustände, die auf- und zugehen.
- 0.32, 0.72, 0, 1 Startet zügig und kommt sehr ruhig an. Angenehm für lange Wege, etwa einen Wechsel über die halbe Seite.
Wichtiger als die genauen Zahlen ist, dass du dieselbe Kurve überall verwendest. Eine Seite mit drei Kurven wirkt geordnet, eine mit zwölf wirkt zufällig.
Eine Bewegung, die auffällt, ist meistens zu lang, nicht zu schwach.
Wann eine Feder besser passt
Eine Easing-Kurve hat eine feste Dauer. Das ist gut für Ein- und Ausblendungen, aber schlecht für alles, was auf eine Eingabe reagiert: Ein Element, das dem Zeiger folgt, kennt sein Ziel noch nicht.
Dafür gibt es Federn. In framer-motion setzt du type: "spring" mit stiffness, damping und mass. Hohe Steifigkeit wirkt schnell, hohe Dämpfung ruhig. Für dezente Bewegungen sind niedrige Steifigkeit und hohe Dämpfung die sichere Wahl.
transition={{ type: "spring", stiffness: 120, damping: 20, mass: 0.6,}}
Kurve, wenn du das Ziel kennst. Feder, wenn das Ziel von einer Eingabe kommt.
