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-Fortschritts-Timeline zu definieren, die durch das Scrollen eines scrollbaren Elements (Scroller) zwischen oben und unten (oder links und rechts) vorangetrieben wird. scroll-timeline-name wird auf dem Scroller festgelegt, der die Timeline bereitstellt.
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 zu steuern.
Hinweis: Wenn das Element nicht in der Achsendimension seinen Container überläuft oder wenn der Überlauf versteckt oder abgeschnitten ist, wird keine Timeline erstellt.
Die Eigenschaften scroll-timeline-axis und scroll-timeline-name können auch mit der scroll-timeline Kurzschreibweise eingestellt werden.
Syntax
scroll-timeline-name: none;
scroll-timeline-name: --custom_name_for_timeline;
Werte
Erlaubte Werte für scroll-timeline-name sind:
none-
Die Timeline hat keinen Namen.
<dashed-ident>-
Ein beliebiger benutzerdefinierter Bezeichner, der einen Namen für eine Scroll-Fortschritts-Timeline definiert, die dann in einer
animation-timelineEigenschaft referenziert werden kann.Hinweis:>
<dashed-ident>Werte müssen mit--beginnen, um Namenskonflikte mit Standard-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-Fortschritts-Timeline-Animation
In diesem Beispiel wird eine Scroll-Timeline mit dem Namen --square-timeline definiert, indem die Eigenschaft scroll-timeline-name auf das Element mit der ID container gesetzt wird. Diese wird dann auf die Animation auf dem #square-Element angewendet, indem animation-timeline: --square-timeline verwendet wird.
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 diesen als Quelle einer Scroll-Timeline mit dem Namen --square-timeline fest, indem die Eigenschaft scroll-timeline-name verwendet wird. Hier wird keine Scrollbalken-Achse definiert, da standardmäßig die vertikale Achse verwendet wird.
Die Höhe des Containers wird auf 300px gesetzt, und der Container wird auch so eingestellt, dass ein vertikaler Scrollbalken erstellt wird, wenn er überläuft (die CSS height-Regel auf dem stretcher-Element unten lässt den Inhalt den Container überlaufen).
#container {
height: 300px;
overflow-y: scroll;
scroll-timeline-name: --square-timeline;
position: relative;
}
Das CSS unten definiert ein Quadrat, das sich gemäß der von der animation-timeline Eigenschaft bereitgestellten Timeline dreht, welche auf die oben genannte --square-timeline 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 stretcher-CSS-Regel setzt die Blockhöhe auf 600px, was Inhalt erzeugt, der das Containerelement überläuft und somit Scrollbalken erzeugt. Ohne dieses Element würde der Inhalt den Container nicht überlaufen, es gäbe keinen Scrollbalken und folglich keine Scroll-Timeline, die mit der Animation-Timeline verknüpft werden könnte.
Ergebnis
Scrollen Sie die vertikale Leiste, um zu sehen, wie sich das Quadrat beim Scrollen animiert.
Spezifikationen
| Specification |
|---|
| Scroll-driven Animations # scroll-timeline-name |