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 Scrollleiste festzulegen, die für die Bereitstellung derZeitleiste für eine scroll-gesteuerte Animation verwendet wird, die durch das Scrollen eines scrollbaren Elements (Scroller) vorangebracht wird.
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 Zeitleiste für eineScroll-Prozess-Zeitleiste Animation bereitzustellen. Der Wert ist die<axis> der Scrollleiste. Diescroll-timeline Eigenschaft wird auf dem Scroller festgelegt, der die Zeitleiste bereitstellen wird.
Wenn das Scroller-Element nicht in der Achsen-Dimension über seinen Container hinausgeht oder wenn der Überlauf versteckt oder abgeschnitten ist, wird keine Scroll-Prozess-Zeitleiste erstellt.
Die Eigenschaftenscroll-timeline-axis undscroll-timeline-name können auch mit derscroll-timeline Kurzschreibweise festgelegt 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
Die Achse der Scroll-Prozess-Zeitleiste definieren
In diesem Beispiel wird eine Scroll-Prozess-Zeitleiste mit dem Namen--my-scroller unter Verwendung derscroll-timeline-name Eigenschaft auf dem:root Element (<html>) definiert. Diese Zeitleiste wird dann auf die Animation des Elements mit deranimation Klasse unter Verwendung vonanimation-timeline: --my-scroller angewendet.
Um die Wirkung vonscroll-timeline-axis zu demonstrieren, wird in diesem Beispiel eine horizontale (nicht voreingestellte) Scrollleiste verwendet, um die Animation anzutreiben.
HTML
Der HTML-Code 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-Prozess-Zeitleiste namens--my-scroller unter Verwendung derscroll-timeline-name Eigenschaft.Die Scrollachse wird mitscroll-timeline-axis: x; festgelegt, was dazu führt, dass diehorizontale Scrollleiste die Animationszeitleiste bestimmt. Wir fügen auchscroll-timeline-axis: horizontal; für Browser hinzu, die die nicht-standardisierten Legacy-Wertehorizontal undvertical und nichtx undy unterstützen.
Die Breite des.content Elements wird auf einen großen Wert gesetzt, um es über das:root Element hinaus laufen zu lassen.
Das.animation Element hat die Animation mit deranimation Kurzschreibweise angewendet, und die Scroll-Zeitleiste wird mit deranimation-timeline festgelegt.
: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 beim Scrollen animiert zu sehen.
Spezifikationen
| Specification |
|---|
| Scroll-driven Animations # propdef-scroll-timeline-axis |