Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
scroll-timeline-axis
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Diescroll-timeline-axisCSS Eigenschaft wird verwendet, um die Richtung der Bildlaufleiste anzugeben, die genutzt wird, um dieZeitachse 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
Diescroll-timeline-axis Eigenschaft legt fest, welche Scrollleiste verwendet wird, um die Zeitachse für eineScroll-Fortschritts-Zeitachse Animation bereitzustellen. Der Wert ist die<axis> der Scrollleiste. Diescroll-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 Eigenschaftenscroll-timeline-axis undscroll-timeline-name können auch mit der Kurzschreibweisescroll-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 derscroll-timeline-name Eigenschaft auf dem:root Element (<html>) definiert. Diese Zeitachse wird dann auf die Animation des Elements mit der Klasseanimation angewendet, indemanimation-timeline: --my-scroller verwendet wird.
Um die Wirkung vonscroll-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></div> <div></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 derscroll-timeline-name Eigenschaft.Die Scroll-Achse wird mitscroll-timeline-axis: x; gesetzt, wodurch die Position derhorizontalen Bildlaufleiste die Animationszeitachse bestimmt. Wir fügen auchscroll-timeline-axis: horizontal; für Browser hinzu, die die nicht standardmäßigen alten Wertehorizontal undvertical unterstützen und nichtx undy.
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 deranimation Kurzschreibweise angewendet, und die Scroll-Zeitachse wird mit deranimation-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%; }}@layer no-support { @supports not (scroll-timeline-axis: block) { body::before { content: "Your browser doesn't support the `scroll-timeline-axis` property."; background-color: wheat; display: block; width: 100%; text-align: center; } }}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 |