Grundlagen des Easings

Hier erfahren Sie, wie Sie Animationen weicher gestalten und gewichten können.

Paul Lewis

Nichts in der Natur bewegt sich linear von einem Punkt zum anderen. In der Realität beschleunigen oder verlangsamen sich Dinge, wenn sie sich bewegen. Unser Gehirn ist darauf programmiert, diese Art von Bewegung zu erwarten. Das sollten Sie sich beim Animieren zunutze machen. Natürliche Bewegungen sorgen dafür, dass sich Nutzer in Ihren Apps wohler fühlen, was wiederum zu einer besseren Gesamterfahrung führt.

Zusammenfassung

• Durch Easing wirken Ihre Animationen natürlicher.
• Wählen Sie Ease-out-Animationen für UI-Elemente aus.
• Vermeiden Sie Ease-In- oder Ease-In-Out-Animationen, es sei denn, Sie können sie kurz halten. Sie wirken auf Endnutzer oft träge.

In der klassischen Animation wird eine Bewegung, die langsam beginnt und beschleunigt, als „Slow In“ bezeichnet, und eine Bewegung, die schnell beginnt und langsamer wird, als „Slow Out“. Die im Web am häufigsten verwendeten Begriffe dafür sind „Ease-In“ und „Ease-Out“. Manchmal werden die beiden kombiniert, was als „Ease-In-Out“ bezeichnet wird. Easing ist also der Prozess, die Animation weniger stark oder ausgeprägt zu machen.

Keywords für Übergänge

Sowohl bei CSS-Übergängen als auch bei CSS-Animationen können Sie die Art des Easings für Ihre Animationen auswählen. Sie können Keywords verwenden, die sich auf das Easing (oder timing, wie es manchmal genannt wird) der betreffenden Animation auswirken. Du kannst auch deine eigenen Easing-Funktionen erstellen, um die Persönlichkeit deiner App noch besser zum Ausdruck zu bringen.

Hier sind einige der Keywords, die Sie in CSS verwenden können:

• linear
• ease-in
• ease-out
• ease-in-out

Quelle: CSS Transitions, W3C

Sie können auch das Keyword steps verwenden, um Übergänge mit diskreten Schritten zu erstellen. Die oben aufgeführten Keywords sind jedoch am nützlichsten, um Animationen zu erstellen, die natürlich wirken.

Lineare Animationen

Animationen ohne jegliches Easing werden als linear bezeichnet. Ein Diagramm eines linearen Übergangs sieht so aus:

Im Laufe der Zeit steigt der Wert um jeweils denselben Betrag. Bei einer linearen Bewegung wirken die Dinge eher roboterhaft und unnatürlich, was von Nutzern als störend empfunden wird. Im Allgemeinen sollten Sie lineare Bewegungen vermeiden.

Unabhängig davon, ob Sie Ihre Animationen mit CSS oder JavaScript programmieren, gibt es immer eine Option für lineare Bewegungen.

Lineare Animation ansehen

Um den obigen Effekt mit CSS zu erzielen, würde der Code in etwa so aussehen:

transition: transform 500ms linear;

Ease-out-Animationen

Bei „Easing out“ startet die Animation schneller als bei linearen Animationen und wird am Ende langsamer.

Easing-out ist in der Regel die beste Wahl für die Benutzeroberfläche, da der schnelle Start Ihren Animationen ein Gefühl von Reaktionsfähigkeit verleiht, während am Ende dennoch eine natürliche Verlangsamung möglich ist.

Animation mit Ease-out ansehen

Es gibt viele Möglichkeiten, einen Ease-Out-Effekt zu erzielen. Die einfachste ist das ease-out-Keyword in CSS:

transition: transform 500ms ease-out;

Ease-In-Animationen

Ease-In-Animationen starten langsam und enden schnell, also das Gegenteil von Ease-Out-Animationen.

Diese Art von Animation ist wie ein fallender schwerer Stein, der langsam beginnt und schnell mit einem dumpfen Aufprall auf dem Boden landet.

Aus Sicht der Interaktion können sich Ease-Ins jedoch aufgrund ihres abrupten Endes etwas ungewöhnlich anfühlen. Dinge, die sich in der realen Welt bewegen, neigen dazu, langsamer zu werden, anstatt einfach plötzlich anzuhalten. Ease-ins haben außerdem den Nachteil, dass sie sich beim Start träge anfühlen, was sich negativ auf die Wahrnehmung der Reaktionsfähigkeit Ihrer Website oder App auswirkt.

Animation mit Ease-In ansehen

Wenn Sie eine Ease-In-Animation verwenden möchten, können Sie wie bei Ease-Out- und linearen Animationen das entsprechende Keyword verwenden:

transition: transform 500ms ease-in;

Ease-in-out-Animationen

Das Ein- und Ausblenden ähnelt dem Beschleunigen und Abbremsen eines Autos und kann, wenn es mit Bedacht eingesetzt wird, einen dramatischeren Effekt erzielen als nur das Ausblenden.

Verwenden Sie keine übermäßig lange Animationsdauer, da der Ease-In-Start der Animation träge ist. Ein Wert im Bereich von 300–500 ms ist in der Regel geeignet, aber die genaue Zahl hängt stark vom Gefühl Ihres Projekts ab. Aufgrund des langsamen Starts, der schnellen Mitte und des langsamen Endes gibt es jedoch einen erhöhten Kontrast in der Animation, was für Nutzende sehr zufriedenstellend sein kann.

Animation mit Ease-In-Out ansehen

Für eine Ease-in-out-Animation können Sie das CSS-Keyword ease-in-out verwenden:

transition: transform 500ms ease-in-out;