CSS-Scroll-Animations

Das CSS-Scroll-Animations-Modul bietet Funktionen, die auf dem CSS-Animationsmodul und der Web Animations API aufbauen. Es ermöglicht die Animation von Eigenschaftswerten basierend auf einem Fortschritt entlang einer scrollbasierten Zeitleiste anstelle der standardmäßigen zeitbasierten Dokumentzeitleiste. Das bedeutet, dass Sie ein Element durch das Scrollen eines scrollbaren Elements animieren können, anstatt nur durch den Ablauf der Zeit.

Es gibt zwei Arten von scrollbasierten Zeitleisten:

  • Scroll-Fortschritts-Zeitleiste: Sie bewegen diese Zeitleiste, indem Sie ein scrollbares Element (Scroller) von oben nach unten (oder von links nach rechts) und wieder zurück scrollen. Die Position im Scrollbereich wird in einen Prozentsatz des Fortschritts umgewandelt — 0 % am Anfang und 100 % am Ende.
  • Sichtbarkeits-Fortschritts-Zeitleiste: Sie bewegen diese Zeitleiste basierend auf Änderungen der Sichtbarkeit eines Elements (bekannt als Subjekt) innerhalb eines Scrollers. Die Sichtbarkeit des Subjekts innerhalb des Scrollers wird als Prozentsatz des Fortschritts verfolgt — standardmäßig befindet sich die Zeitleiste bei 0 %, wenn das Subjekt an einer Kante des Scrollers erstmals sichtbar wird, und bei 100 %, wenn es die gegenüberliegende Kante erreicht.

Wenn eine dieser beiden Zeitleisten auf ein animiertes Element angewendet wird, bewegt sich die Animation entlang dieser Zeitleiste anstelle der standardmäßigen zeitbasierten Zeitleiste.

Es ist möglich, die effektive Platzierung der Animation entlang der Scrollfortschritts- und Sichtbarkeits-Fortschritts-Zeitleisten anzupassen, d. h., Sie können die Position definieren, an der die Animation beginnt und endet. Dies kann auf verschiedene Weise erfolgen:

  • Start- und Endwerte des Animationsbereichs können auf die Animation angewendet werden, um die Position des Start- und Endpunkts der Animation entlang der Zeitleiste anzupassen.
  • Sichtbarkeits-Fortschritts-Zeitleisten können einen Start- und/oder End-Abstand (oder Vorsprung) aufweisen, der auf sie angewendet wird, um die Position des Scrollports (siehe Scroll-Container für weitere Details) anzupassen, in dem das Subjektelement als sichtbar betrachtet wird. Anders ausgedrückt können Sie Start- und/oder Endabstände definieren, die die Position der Zeitleiste selbst verschieben.

Scroll-Animations in Aktion

Sie finden mehrere Tools und Demos, die Scroll-basierte Animationen in Aktion zeigen, auf Scroll-driven Animations tools and demos.

Referenz

Eigenschaften

Legen Sie die Zeitleiste fest, die den Fortschritt einer Animation steuern soll, und definieren Sie deren Anhangsbereich entlang dieser Zeitleiste:

Definieren Sie benannte Scroll-Fortschritts-Zeitleisten:

Definieren Sie benannte Sichtbarkeits-Fortschritts-Zeitleisten:

Modifizieren Sie den Geltungsbereich der Zeitleiste:

At-Regeln

CSS-Scroll-Animationen ermöglichen es, <timeline-range-name>s in @keyframes-Blöcken einzufügen, um Keyframes an bestimmten Positionen innerhalb benannter Zeitleistenbereiche zu platzieren.

Funktionen

Mögliche Werte der Eigenschaft animation-timeline zum Definieren von anonymen Scroll-Fortschritts-Zeitleisten und anonymen Sichtbarkeits-Fortschritts-Zeitleisten (d. h. implizit vom Browser definiert, anstatt ausdrücklich benannt und mit den scroll-timeline-*- und view-timeline-*-Eigenschaften definiert):

Schnittstellen

Spezifikationen

Specification
Scroll-driven Animations
CSS Animations Level 2
Web Animations Level 2

Siehe auch