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