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 verändert den Geltungsbereich einer benannten Animations-Timeline.
Syntax
/* Keyword values */
timeline-scope: all;
timeline-scope: none;
/* Custom name values */
timeline-scope: --custom_name_for_timeline;
timeline-scope: --timeline_name_one, --timeline_name_two;
/* Global values */
timeline-scope: inherit;
timeline-scope: initial;
timeline-scope: revert;
timeline-scope: revert-layer;
timeline-scope: unset;
Werte
Erlaubte Werte für timeline-scope sind:
none-
Es gibt keine Änderung im Timeline-Geltungsbereich. Dies ist der Standard.
all-
Die Namen aller von Nachfahren definierten Timelines sind für dieses Element und seine Nachfahren im Geltungsbereich.
<dashed-ident>-
Gibt den Namen einer existierenden benannten Timeline an (d.h. deklariert mit
scroll-timeline-nameoderview-timeline-name), die auf einem Nachfahren-Element definiert ist. Dadurch wird der Timeline-Geltungsbereich auf das aktuelle Element und alle seine Nachfahren erweitert.
Beschreibung
Die timeline-scope Eigenschaft verä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 steuernde Timeline eines direkten Nachfahren-Elements festgelegt werden (d.h. durch Setzen von animation-timeline auf dieses mit dem Timelinenamen als Wert). Dies ist der Standard-"Geltungsbereich" für die Timeline.
Der Wert von timeline-scope ist der Name einer Timeline, die auf einem Nachfahren-Element definiert ist; dies ändert den Geltungsbereich der Timeline, sodass das Ziel-Element und dessen Nachfahren einbezogen werden. Mit anderen Worten: das Element, auf dem die timeline-scope Eigenschaft definiert ist, und alle seine Nachfahren-Elemente können mit dieser Timeline gesteuert werden.
Wenn keine Timeline (oder mehr als eine Timeline) mit dem für den timeline-scope Wert angegebenen Namen existiert, wird eine inaktive Timeline mit dem angegebenen Namen erstellt. Die timeline-scope Eigenschaft funktioniert nur mit benannten Timelines und kann daher nicht in Verbindung mit anonymen Timelines verwendet werden, die mit den Animations-Timeline-Funktionen view() oder scroll() erstellt werden.
Formaler 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 animieren wir ein Element in Reaktion auf das Scrollen eines anderen Elements, indem wir den Timeline-Geltungsbereich mit der timeline-scope Eigenschaft erweitern.
HTML
Das HTML enthält ein Element zum Animieren und ein Element zum Scrollen:
<div class="content">
<div class="box animation"></div>
</div>
<div class="scroller">
<div class="long-element"></div>
</div>
CSS
Eine Scroll-Timeline namens --my-scroller wird mithilfe der scroll-timeline-name Eigenschaft auf einem scrollbaren Element definiert. Dieser Scroll-Timelinenamen wird an zwei anderen Stellen verwendet: Er wird als animation-timeline auf das Element angewendet, das wir animieren möchten, und als timeline-scope auf einen Vorfahren sowohl des Scrollers als auch des animierten Elements, um den Geltungsbereich zu erweitern.
Wir setzen die Höhe des <body> auf 100vh und ordnen seine beiden Kindelemente als zwei gleichmäßige Spalten mit Flexbox an. Um den Timeline-Geltungsbereich vom <div class="scroller">-Element auf das gesamte <body> zu erweitern, setzen wir timeline-scope: --my-scroller darauf. Dadurch kann die --my-scroller Timeline als steuernde Timeline für eine auf dem <body> oder einem darin verschachtelten Element gesetzte Animation festgelegt werden.
body {
margin: 0;
height: 100vh;
display: flex;
timeline-scope: --my-scroller;
}
.content,
.scroller {
flex: 1;
}
Wir setzen --my-scroller als scroll-timeline-name auf dem scrollenden Element, das die Scroll-Progress-Timeline für unser animiertes Element bereitstellen soll. Wir fügen overflow hinzu, um das Scrollen zu ermöglichen und fügen eine Hintergrundfarbe hinzu, um die Begrenzung sichtbar zu machen. Wir setzen eine große height auf die Inhalte unseres scrollenden Elements, damit das Element tatsächlich scrollt.
.scroller {
overflow: scroll;
scroll-timeline-name: --my-scroller;
background: deeppink;
}
.long-element {
height: 2000px;
}
Anschließend geben wir dem animierten Element einige rudimentäre Stile und wenden eine Animation darauf an, indem wir die animation Kurzschreibweise verwenden. Wir setzen die animation-timeline auf die benannte Scroll-Timeline: --my-scroller. Um zu wiederholen: Das Animieren des Elements basierend auf dem Scroll-Fortschritt seines Schwester-Elements ist nur möglich, weil wir timeline-scope auf einem gemeinsamen Vorfahren gesetzt haben; das animierte Element ist kein Nachfahre des scrollenden Elements.
.box {
width: 100px;
height: 100px;
border-radius: 10px;
background-color: rebeccapurple;
}
.animation {
animation: rotate-appear 1ms linear;
animation-timeline: --my-scroller;
}
@keyframes rotate-appear {
from {
rotate: 0deg;
translate: 0;
}
to {
rotate: 720deg;
translate: 100%;
}
}
Ergebnis
Scrollen Sie die vertikale Leiste im rosa Bereich, um das Quadrat zu animieren.
Der wichtige Punkt hier ist, dass das animierte Element kein Nachfahre des scrollenden Elements ist — um dies zu ermöglichen, erweitern wir den Geltungsbereich der --my-scroller Timeline, indem wir timeline-scope: --my-scroller auf dem <body> setzen.
Spezifikationen
| Specification |
|---|
| Scroll-driven Animations # propdef-timeline-scope |