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 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 Element des Containers anzugeben, das verwendet wird, um den Fortschritt der Animation durch die Scroll-Aktion voranzutreiben.
Hinweis: Wenn das Element in der Achsendimension nicht über seinen Container hinausläuft oder wenn der Überlauf ausgeblendet oder abgeschnitten ist, wird keine Zeitleiste erstellt.
Die scroll-timeline-axis und scroll-timeline-name Eigenschaften können auch mit der scroll-timeline Kurzform-Eigenschaft gesetzt werden.
Syntax
scroll-timeline-name: none;
scroll-timeline-name: --custom_name_for_timeline;
Werte
Erlaubte 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, die dann in einer
animation-timelineEigenschaft referenziert werden kann.Hinweis:
<dashed-ident>Werte müssen mit--beginnen, um Konflikte 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-Fortschrittszeitleisten-Animation
In diesem Beispiel wird eine Scroll-Zeitleiste mit dem Namen --square-timeline definiert, indem die scroll-timeline-name Eigenschaft auf dem Element mit der ID container verwendet wird.
Diese wird dann auf die Animation auf dem #square Element 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
Das CSS für den Container legt fest, dass er die Quelle einer Scroll-Zeitleiste mit dem Namen --square-timeline ist, indem die scroll-timeline-name Eigenschaft verwendet wird. Hier wird keine Scrollbar-Achse definiert, da die vertikale Achse standardmäßig verwendet wird.
Die Höhe des Containers wird auf 300px gesetzt, und der Container ist ebenfalls darauf eingestellt, eine vertikale Scrollbar zu erstellen, wenn 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;
}
Das untenstehende CSS definiert ein Quadrat, das sich gemäß der durch die animation-timeline Eigenschaft bereitgestellten Zeitleiste dreht, 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 entsteht, der das Container-Element überläuft und dadurch Scrollbalken erzeugt.
Ohne dieses Element würde der Inhalt den Container nicht überlaufen, es gäbe keine Scrollbar und somit keine Scroll-Zeitleiste, die mit der Animationszeitleiste verknüpft 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 |
Browser-Kompatibilität
Loading…