scroll-timeline-name
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Die scroll-timeline-name CSS-Eigenschaft wird verwendet, um den Namen einer benannten Scroll-Fortschrittszeitleiste zu definieren, die durch das Scrollen eines scrollbaren Elements (Scroller) zwischen oben und unten (oder links und rechts) fortschreitet. scroll-timeline-name wird auf den Scroller gesetzt, der die Zeitleiste bereitstellen wird.
Der Name wird dann in einer animation-timeline-Deklaration referenziert, um das Containerelement anzuzeigen, das verwendet wird, um den Fortschritt der Animation durch die Scrollaktion zu steuern.
Hinweis: Wenn das Element in der Achsendimension nicht überläuft oder wenn das Überlaufen versteckt oder abgeschnitten ist, wird keine Zeitleiste erstellt.
Die scroll-timeline-axis- und scroll-timeline-name-Eigenschaften können auch mit der scroll-timeline-Kurzschreibweise gesetzt werden.
Syntax
scroll-timeline-name: none;
scroll-timeline-name: --custom_name_for_timeline;
Werte
Zulässige Werte für scroll-timeline-name sind:
none-
Die Zeitleiste hat keinen Namen.
<dashed-ident>-
Ein beliebiger benutzerdefinierter Bezeichner, der einen Namen für eine Scroll-Fortschrittszeitleiste definiert, der dann in einer
animation-timeline-Eigenschaft referenziert werden kann.Hinweis:
<dashed-ident>-Werte müssen mit--beginnen, was hilft, Namenskollisionen mit standardmäßigen CSS-Schlüsselwörtern zu vermeiden.
Formale Definition
| Anfangswert | none |
|---|---|
| Anwendbar auf | Scrollcontainer |
| Vererbt | Nein |
| Berechneter Wert | none or an ordered list of identifiers |
| Animationstyp | Not animatable |
Formale Syntax
scroll-timeline-name =
[ none | <dashed-ident> ]#
Beispiele
Erstellen einer benannten Scroll-Fortschrittszeitleistenanimation
In diesem Beispiel wird eine Scroll-Zeitleiste namens --square-timeline mithilfe der scroll-timeline-name-Eigenschaft auf dem Element mit der ID container definiert.
Diese wird dann auf die Animation des Elements #square mit animation-timeline: --square-timeline angewendet.
HTML
Der HTML-Code für das Beispiel wird unten gezeigt.
<div id="container">
<div id="square"></div>
<div id="stretcher"></div>
</div>
CSS
Der CSS-Code für den Container legt fest, dass er die Quelle einer Scroll-Fortschrittszeitleiste namens --square-timeline mithilfe der scroll-timeline-name-Eigenschaft ist. Es ist keine Scrollbar-Achse definiert, da standardmäßig die vertikale Achse verwendet wird.
Die Höhe des Containers ist auf 300px gesetzt und der Container wird außerdem so eingestellt, dass er eine vertikale Scrollleiste erstellt, falls er überläuft (die CSS-height-Regel auf dem stretcher-Element unten lässt den Inhalt über seinen Container hinauslaufen).
#container {
height: 300px;
overflow-y: scroll;
scroll-timeline-name: --square-timeline;
position: relative;
}
Der untenstehende CSS-Code definiert ein Quadrat, das sich nach der Zeitleiste dreht, die durch die animation-timeline-Eigenschaft bereitgestellt wird, die auf die oben genannte --square-timeline-Zeitleiste gesetzt ist.
#square {
background-color: deeppink;
width: 100px;
height: 100px;
margin-top: 100px;
animation-name: rotateAnimation;
animation-duration: 1ms; /* Firefox requires this to apply the animation */
animation-timeline: --square-timeline;
position: absolute;
bottom: 0;
}
#stretcher {
height: 600px;
background: #dedede;
}
@keyframes rotateAnimation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
Die stretcher-CSS-Regel setzt die Blockhöhe auf 600px, wodurch Inhalt erstellt wird, der das Containerelement überläuft und dadurch Scrollbalken erstellt.
Ohne dieses Element würde der Inhalt den Container nicht überlaufen, es gäbe keinen Scrollbalken und folglich keine Scroll-Zeitleiste, die mit der Animationszeitleiste assoziiert werden könnte.
Ergebnis
Scrollen Sie die vertikale Leiste, um zu sehen, wie das Quadrat animiert wird, während Sie scrollen.
Spezifikationen
| Specification |
|---|
| Scroll-driven Animations # scroll-timeline-name |