CSS-Keyframe-Animationen mit React

Eine @keyframes-Regel beschreibt eine Animation in mehreren Schritten, indem sie Eigenschaftswerte an Punkten entlang einer Zeitachse festlegt – mit from/to oder Prozentwerten wie 0%, 50%, 100%.

Im Gegensatz zu Transitionen können Keyframes komplexe Bewegungen über mehrere Stufen beschreiben, die selbstständig ablaufen, ohne dass in jedem Schritt eine Zustandsänderung erforderlich ist.

Mit der Eigenschaft animation wenden Sie ein Keyframe-Set an: animation: slideIn 400ms ease forwards. Sie bündelt Name, Dauer, Timing-Funktion und Füllmodus.

Der Füllmodus forwards sorgt dafür, dass das Element nach Ende der Animation die Werte seines letzten Keyframes beibehält, und verhindert so das Zurückspringen zum Anfang.

In React fügen Sie normalerweise eine Klasse hinzu, die die animation-Deklaration enthält, sobald der Zustand true wird. Wenn Sie beispielsweise is-entering hinzufügen, starten die Keyframes in dem Moment, in dem das Element gemountet wird oder ein Flag umspringt.

Das hält die Animationslogik in CSS, während React nur entscheidet, wann die Klasse angefügt wird.

animation-fill-mode legt fest, welche Stile vor und nach der Animation gelten. forwards bewahrt den letzten Keyframe, backwards wendet den ersten Keyframe während einer eventuellen Verzögerung an, und both tut beides.

Ohne forwards würde ein Element, das in einen eingeblendeten Zustand animiert wird, nach Abschluss der Animation wieder unsichtbar werden.

animation-direction: alternate spielt die Animation bei jeder Wiederholung vorwärts und anschließend rückwärts ab. Zusammen mit animation-iteration-count: infinite entsteht ein gleichmäßiges Hin und Her, etwa ein Pulsier- oder Atemeffekt.

Das ist praktisch für Ladeanzeigen oder subtile Bewegungen, die Aufmerksamkeit wecken.

animation-play-state kann running oder paused sein. Sie können den Wert über den React-State steuern, zum Beispiel eine Marquee-Animation beim Überfahren mit dem Mauszeiger pausieren, indem Sie eine Klasse wechseln.

Da die Animation pausiert und nicht zurückgesetzt wird, wird sie genau an der Stelle fortgesetzt, an der sie angehalten wurde.

Eine Keyframe-Animation wird nur einmal abgespielt, wenn ihre Klasse erstmals angewendet wird; das erneute Hinzufügen derselben Klasse startet sie nicht neu. Der sauberste React-Trick besteht darin, den key des Elements zu ändern, sodass React einen neuen Knoten mountet und die Animation von Anfang an abspielt.

Beispielsweise sorgt key={count} bei einem Toast dafür, dass er jedes Mal neu gemountet wird, wenn count erhöht wird.

Manche Nutzer aktivieren aus Gründen des Komforts oder der Barrierefreiheit eine reduzierte Bewegung in ihrem Betriebssystem. Fassen Sie nicht notwendige Animationen in @media (prefers-reduced-motion: reduce) ein und deaktivieren oder verkürzen Sie sie dort.

Wenn Sie diese Präferenz berücksichtigen, wird Ihre Benutzeroberfläche inklusiver und löst weniger Unwohlsein aus.

Um Elemente zu animieren, sobald sie in den sichtbaren Bereich gelangen, verwenden Sie einen IntersectionObserver in einem useEffect. Sobald der Eintrag sichtbar wird, setzen Sie den State, wodurch die Animationsklasse hinzugefügt wird.

So entstehen Reveal-on-Scroll-Effekte, ohne dass bei jedem Frame aufwendige Scroll-Listener ausgeführt werden.

animation-delay staffelt den Beginn der einzelnen Keyframe-Animationen. Wenn Sie einer Liste von Elementen zunehmend längere Verzögerungen geben, werden sie für eine choreografierte Darstellung nacheinander animiert.

In React können Sie die Verzögerung pro Element mit style={{ animationDelay: i * 80 + 'ms' }} berechnen.

Verwenden Sie Transitions für einfache, durch Interaktionen ausgelöste Änderungen zwischen zwei Zuständen und Keyframes, wenn Sie mehrstufige Bewegungen, Schleifen oder eine Animation benötigen, die unabhängig von einem State-Wechsel läuft.

Beides ist reines CSS. React entscheidet also nur, wann Klassen angebracht werden, während der Browser die Frames verarbeitet.

Testen Sie Ihr Verständnis des Verhaltens von Keyframes.

Sie haben gelernt, @keyframes zu definieren, sie mit der Kurzschreibweise animation anzuwenden, Füllmodus und Richtung zu steuern, Animationen zu pausieren und erneut auszulösen sowie Elemente beim Scrollen mit IntersectionObserver einzublenden.

Außerdem haben Sie gesehen, wie Sie prefers-reduced-motion für barrierearme Bewegungen berücksichtigen.