timeline-scope
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Die timeline-scope CSS Eigenschaft ändert den Geltungsbereich einer benannten Animations-Timeline.
Standardmäßig kann eine benannte Timeline (d.h. deklariert mit scroll-timeline-name oder view-timeline-name) nur als Steuerungs-Timeline eines direkten Nachfahrenelements gesetzt werden (d.h. durch Setzen von animation-timeline auf dieses Element mit dem Namen der Timeline als Wert). Dies ist der Standard-"Scope" der Timeline.
timeline-scope erhält den Namen einer Timeline, die auf einem Nachfahrenelement definiert ist; dies führt dazu, dass der Geltungsbereich der Timeline auf das Element, auf dem timeline-scope gesetzt ist, und auf alle seine Nachfahren erweitert wird. Mit anderen Worten, dieses Element und alle seine Nachfahrenelemente können nun mit dieser Timeline gesteuert werden.
Hinweis:
Wenn keine Timeline (oder mehr als eine Timeline) mit dem für timeline-scope angegebenen Namen existiert, wird eine inaktive Timeline mit dem angegebenen Namen erstellt.
Syntax
timeline-scope: none;
timeline-scope: custom_name_for_timeline;
Werte
Erlaubte Werte für timeline-scope sind:
none-
Es gibt keine Änderung im Geltungsbereich der Timeline.
<dashed-ident>-
Gibt den Namen einer bestehenden benannten Timeline an (d.h. deklariert mit
scroll-timeline-nameoderview-timeline-name), die auf einem Nachfahrenelement definiert ist. Dies führt dazu, dass der Geltungsbereich der Timeline auf das Element, auf demtimeline-scopegesetzt ist, und auf alle seine Nachfahren erweitert wird.Hinweis:
<dashed-ident>Werte müssen mit--beginnen, um Namenskollisionen mit Standard-CSS-Schlüsselwörtern zu vermeiden.
Formale Definition
| Anfangswert | none |
|---|---|
| Anwendbar auf | alle Elemente |
| Vererbt | Nein |
| Berechneter Wert | none or an ordered list of identifiers |
| Animationstyp | Not animatable |
Formale Syntax
timeline-scope =
none |
all |
<dashed-ident>#
Beispiele
In diesem Beispiel wird eine Scroll-Timeline mit dem Namen --my-scroller mit der Eigenschaft scroll-timeline-name auf dem Element mit der Klasse scroller (dem Scrolling-Element) definiert. Diese wird dann auf die Animation des Elements mit den Klassen box und animation (dem animierten Element) angewendet, mit animation-timeline: --my-scroller. Der entscheidende Punkt hier ist, dass das animierte Element kein Nachfahre des Scrolling-Elements ist — um dies zu ermöglichen, erweitern wir den Geltungsbereich der --my-scroller Timeline, indem wir timeline-scope: --my-scroller auf den <body> setzen.
HTML
Das HTML für das Beispiel ist unten gezeigt.
<div class="content">
<div class="box animation"></div>
</div>
<div class="scroller">
<div class="long-element"></div>
</div>
CSS
Das CSS ist wie folgt.
Zuerst setzen wir die Höhe des <body> auf 100vh und legen seine zwei Kindelemente als zwei gleiche Spalten mit Flexbox an. Wir setzen auch timeline-scope: --my-scroller darauf, damit die --my-scroller Timeline als Steuerungstimeline für eine Animation auf dem <body> und jedem darin befindlichen Element gesetzt werden kann.
body {
margin: 0;
height: 100vh;
display: flex;
/* increases the timeline scope from the .scroller <div> element
to the whole <body> */
timeline-scope: --my-scroller;
}
.content,
.scroller {
flex: 1;
}
Als nächstes wird auf dem Scrolling-Element die --my-scroller Timeline gesetzt, overflow, damit es scrollen kann, und es erhält eine Hintergrundfarbe, damit sein Rand deutlich sichtbar ist. Das lange Kindelement des Scrolling-Elements erhält eine große Höhe, damit das Scrolling-Element tatsächlich scrollt.
.scroller {
overflow: scroll;
scroll-timeline-name: --my-scroller;
background: deeppink;
}
.long-element {
height: 2000px;
}
Dann geben wir dem animierten Element ein einfaches Styling und wenden eine Animation darauf an. Wir setzen auch die --my-scroller Timeline darauf, indem wir animation-timeline: --my-scroller verwenden. Zur Wiederholung, dies ist nur möglich, weil wir zuvor timeline-scope: --my-scroller auf dem <body>-Element gesetzt haben — das animierte Element ist kein Nachfahre des Scrolling-Elements.
.box {
width: 100px;
height: 100px;
border-radius: 10px;
background-color: rebeccapurple;
position: fixed;
top: 20px;
left: 0%;
}
.animation {
animation: rotate-appear;
animation-timeline: --my-scroller;
}
@keyframes rotate-appear {
from {
rotate: 0deg;
left: 0%;
}
to {
rotate: 720deg;
left: 100%;
}
}
Ergebnis
Scrollen Sie die vertikale Leiste im rosa Bereich, um zu sehen, wie das Quadrat animiert wird.
Spezifikationen
| Specification |
|---|
| Scroll-driven Animations # propdef-timeline-scope |