scroll-timeline-name CSS property
Eingeschränkt verfügbar
Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.
Want more browser support for this feature? Tell us why.
Die CSS-Eigenschaft scroll-timeline-name wird verwendet, um den Namen einer benannten Scroll-Fortschritts-Zeitleiste zu definieren.
Syntax
/* Keyword value */
scroll-timeline-name: none;
/* Named timeline */
scroll-timeline-name: --custom_name_for_timeline;
/* Global values */
scroll-timeline-name: inherit;
scroll-timeline-name: initial;
scroll-timeline-name: revert;
scroll-timeline-name: revert-layer;
scroll-timeline-name: unset;
Werte
Diese Eigenschaft wird als einer der folgenden Werte angegeben:
none-
Die Zeitleiste hat keinen Namen.
<dashed-ident>-
Ein beliebiger benutzerdefinierter Bezeichner, der einen Namen für eine Scroll-Fortschritts-Zeitleiste definiert, auf den anschließend in einer
animation-timeline-Eigenschaft verwiesen werden kann.
Beschreibung
Die Eigenschaft scroll-timeline-name wird verwendet, um den Namen einer benannten Scroll-Fortschritts-Zeitleiste zu definieren, die durch das Scrollen eines scrollbaren Elements (scroller) zwischen oben und unten (oder links und rechts) durchlaufen wird.
Legen Sie die Eigenschaft scroll-timeline-name auf dem Scroller fest, der die Zeitleiste bereitstellt. Auf den Namen wird dann in einer animation-timeline-Deklaration verwiesen, um das Element des Containers anzugeben, das verwendet wird, um den Fortschritt der Animation durch die Scrollaktion anzutreiben.
Wenn das Element seinen Container in der Achsendimension nicht überläuft oder wenn der Überlauf verborgen oder abgeschnitten ist, wird keine Zeitleiste erstellt.
scroll-timeline-name kann zusammen mit der Eigenschaft scroll-timeline-axis auch mithilfe der Kurzform scroll-timeline festgelegt werden.
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-Fortschritts-Zeitleistenanimation
In diesem Beispiel wird mithilfe der Eigenschaft scroll-timeline-name auf dem Element mit der ID container eine Scroll-Zeitleiste namens --square-timeline definiert.
Diese wird dann mithilfe von animation-timeline: --square-timeline auf die Animation des Elements #square angewendet.
HTML
Das HTML für das Beispiel wird unten gezeigt.
<div id="container">
<div id="square"></div>
<div id="stretcher"></div>
</div>
CSS
Das CSS für den Container legt ihn mithilfe der Eigenschaft scroll-timeline-name als Quelle einer Scroll-Zeitleiste namens --square-timeline fest. Hier wird keine Scrollbar-Achse definiert, da standardmäßig die vertikale Achse verwendet wird.
Die Höhe des Containers wird auf 300px gesetzt, und der Container wird außerdem so festgelegt, dass er bei Überlauf eine vertikale Scrollbar erstellt (die CSS-Regel height für das unten stehende Element stretcher sorgt dafür, dass der Inhalt seinen Container überläuft).
#container {
height: 300px;
overflow-y: scroll;
scroll-timeline-name: --square-timeline;
position: relative;
}
Das folgende CSS definiert ein Quadrat, das sich entsprechend der von der Eigenschaft animation-timeline bereitgestellten Zeitleiste dreht, welche auf die oben benannte Zeitleiste --square-timeline 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 CSS-Regel stretcher setzt die Blockhöhe auf 600px, wodurch Inhalt erstellt wird, der das Container-Element überläuft und dadurch Scrollbars erzeugt.
Ohne dieses Element würde der Inhalt den Container nicht überlaufen, es gäbe keine Scrollbar und somit keine Scroll-Zeitleiste, die der Animations-Zeitleiste zugeordnet werden könnte.
Ergebnis
Scrollen Sie die vertikale Leiste, um zu sehen, wie das Quadrat beim Scrollen animiert wird.
Spezifikationen
| Spezifikation |
|---|
| Scroll-driven Animations # scroll-timeline-name |