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. Diese wird durch das Scrollen eines scrollbaren Elements (Scroller) zwischen oben und unten (oder links und rechts) vorangetrieben. scroll-timeline-name wird auf den Scroller gesetzt, der die Zeitleiste 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 in der Achsendimension seinen Container nicht überläuft oder wenn der Überlauf 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
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, was hilft, Konflikte 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-Fortschrittszeitleisten-Animation
In diesem Beispiel wird eine Scroll-Zeitleiste namens --square-timeline definiert, indem die scroll-timeline-name Eigenschaft auf dem Element mit der ID container verwendet wird. Diese wird dann auf die Animation des #square Elements angewendet, indem animation-timeline: --square-timeline gesetzt wird.
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 setzt ihn als Quelle einer Scroll-Zeitleiste namens --square-timeline mittels der scroll-timeline-name Eigenschaft. Keine Scrollleistenachse wird hier definiert, da standardmäßig die vertikale Achse verwendet wird.
Die Höhe des Containers ist auf 300px gesetzt, und der Container ist auch so eingestellt, dass er eine vertikale Scrollleiste erstellt, wenn er überläuft (die CSS height Regel auf dem stretcher Element unten sorgt dafür, dass der Inhalt seinen Container überläuft).
#container {
height: 300px;
overflow-y: scroll;
scroll-timeline-name: --square-timeline;
position: relative;
}
Das untenstehende CSS definiert ein Quadrat, das gemäß der durch die animation-timeline Eigenschaft bereitgestellten Zeitleiste rotiert, welche 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, was Inhalt erzeugt, der das Containerelement überläuft und somit Scrollleisten erstellt.
Ohne dieses Element würde der Inhalt nicht den Container überlaufen, es gäbe keine Scrollleiste 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 je nach Scrollbewegung animiert wird.
Spezifikationen
| Specification |
|---|
| Scroll-driven Animations # scroll-timeline-name |
Browser-Kompatibilität
Loading…