scroll-timeline-axis
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Die scroll-timeline-axis CSS Eigenschaft wird verwendet, um die Richtung der Bildlaufleiste anzugeben, die genutzt wird, um die Zeitachse für eine scroll-gesteuerte Animation bereitzustellen, die durch das Scrollen eines scrollbaren Elements (Scroller) fortschreitet.
Syntax
/* Logical property values */ scroll-timeline-axis: block; scroll-timeline-axis: inline; /* Physical property values */ scroll-timeline-axis: y; scroll-timeline-axis: x; /* Global values */ scroll-timeline-axis: inherit; scroll-timeline-axis: initial; scroll-timeline-axis: revert; scroll-timeline-axis: revert-layer; scroll-timeline-axis: unset; Werte
Beschreibung
Die scroll-timeline-axis Eigenschaft legt fest, welche Scrollleiste verwendet wird, um die Zeitachse für eine Scroll-Fortschritts-Zeitachse Animation bereitzustellen. Der Wert ist die <axis> der Scrollleiste. Die scroll-timeline Eigenschaft wird auf dem Scroller gesetzt, der die Zeitachse bereitstellen wird.
Wenn das Scroller-Element in der Achsendimension nicht außerhalb seines Containers überläuft oder wenn der Überlauf ausgeblendet oder abgeschnitten ist, wird keine Scroll-Fortschritts-Zeitachse erstellt.
Die Eigenschaften scroll-timeline-axis und scroll-timeline-name können auch mit der Kurzschreibweise scroll-timeline gesetzt werden.
Formale Definition
| Anfangswert | block |
|---|---|
| Anwendbar auf | Scrollcontainer |
| Vererbt | Nein |
| Berechneter Wert | wie angegeben |
| Animationstyp | Not animatable |
Formale Syntax
scroll-timeline-axis =
[ block | inline | x | y ]#
Beispiele
Definition der Achse der Scroll-Fortschritts-Zeitachse
In diesem Beispiel wird eine Scroll-Fortschritts-Zeitachse mit dem Namen --my-scroller mithilfe der scroll-timeline-name Eigenschaft auf dem :root Element (<html>) definiert. Diese Zeitachse wird dann auf die Animation des Elements mit der Klasse animation angewendet, indem animation-timeline: --my-scroller verwendet wird.
Um die Wirkung von scroll-timeline-axis zu demonstrieren, wird in diesem Beispiel eine horizontale (nicht standardmäßige) Bildlaufleiste verwendet, um die Animation zu steuern.
HTML
Das HTML für das Beispiel wird unten gezeigt.
<body> <div class="content"></div> <div class="box animation"></div> </body> CSS
Das CSS für den Container setzt das :root als Quelle einer Scroll-Fortschritts-Zeitachse mit dem Namen --my-scroller unter Verwendung der scroll-timeline-name Eigenschaft. Die Scroll-Achse wird mit scroll-timeline-axis: x; gesetzt, wodurch die Position der horizontalen Bildlaufleiste die Animationszeitachse bestimmt. Wir fügen auch scroll-timeline-axis: horizontal; für Browser hinzu, die die nicht standardmäßigen alten Werte horizontal und vertical unterstützen und nicht x und y.
Die Breite des .content Elements wird auf einen großen Wert gesetzt, damit es das :root Element überläuft.
Auf das .animation Element wird die Animation mit der animation Kurzschreibweise angewendet, und die Scroll-Zeitachse wird mit der animation-timeline gesetzt.
:root { scroll-timeline-name: --my-scroller; scroll-timeline-axis: x; scroll-timeline-axis: horizontal; } body { margin: 0; overflow-y: hidden; } .content { height: 100vh; width: 2000px; } .box { width: 100px; height: 100px; border-radius: 10px; background-color: rebeccapurple; position: fixed; top: 25px; left: 25px; } .animation { animation: rotate-appear 1ms linear; animation-timeline: --my-scroller; } @keyframes rotate-appear { from { rotate: 0deg; top: 0%; } to { rotate: 720deg; top: 100%; } } Ergebnis
Scrollen Sie die horizontale Leiste am unteren Rand, um das Quadrat animiert zu sehen, während Sie scrollen.
Spezifikationen
| Specification |
|---|
| Scroll-driven Animations # propdef-scroll-timeline-axis |