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 modifiziert den Geltungsbereich einer benannten Animations-Timeline.
Standardmäßig kann eine benannte Timeline (d.h. deklariert durch scroll-timeline-name oder view-timeline-name) nur als die steuernde Timeline eines direkten Nachfahrelements festgelegt werden (d.h. durch Setzen von animation-timeline auf dieses mit dem Timelinenamen als Wert). Dies ist der Standard-"Geltungsbereich" der Timeline.
timeline-scope wird der Name einer auf einem Nachfahrelement definierten Timeline gegeben; dies bewirkt, dass der Geltungsbereich der Timeline auf das Element erweitert wird, auf dem timeline-scope festgelegt ist, sowie auf alle seine Nachfahren. Mit anderen Worten, dieses Element und alle seine Nachfahrelemente können nun mit dieser Timeline gesteuert werden.
Hinweis: 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.
Syntax
timeline-scope: none; timeline-scope: custom_name_for_timeline; Werte
Erlaubte Werte für timeline-scope sind:
none-
Es gibt keine Änderung im Timelinen-Geltungsbereich.
<dashed-ident>-
Gibt den Namen einer existierenden benannten Timeline an (d.h. deklariert durch
scroll-timeline-nameoderview-timeline-name), die auf einem Nachfahrelement definiert ist. Dies bewirkt, dass der Geltungsbereich der Timeline auf das Element erweitert wird, auf demtimeline-scopefestgelegt ist, sowie auf alle seine Nachfahren.Hinweis:
<dashed-ident>-Werte müssen mit--beginnen, um Konflikte 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 namens --my-scroller mithilfe der Eigenschaft scroll-timeline-name auf dem Element mit der Klasse scroller (dem Scroll-Element) definiert. Diese wird dann auf die Animation des Elements mit den Klassen box und animation (dem animierten Element) angewendet, indem animation-timeline: --my-scroller verwendet wird. Der entscheidende Punkt ist, dass das animierte Element kein Nachfahre des Scroll-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.
HTML
Der HTML-Code für das Beispiel ist unten dargestellt.
<div class="content"> <div class="box animation"></div> </div> <div class="scroller"> <div class="long-element"></div> </div> CSS
Die CSS lautet wie folgt.
Zunächst setzen wir die Höhe des <body> auf 100vh und verteilen seine zwei Kindelemente als zwei gleich große Spalten mit Hilfe von Flexbox. Wir setzen außerdem timeline-scope: --my-scroller, sodass die --my-scroller-Timeline als steuerende Timeline für eine auf dem <body> und jedem darin befindlichen Element gesetzte Animation festgelegt 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 das Scroll-Element die --my-scroller-Timeline gesetzt, overflow, sodass es scrollt, und es wird eine Hintergrundfarbe festgelegt, damit seine Begrenzung klar erkennbar ist. Dem langen Kind-Element des Scroll-Elements wird eine große Höhe zugewiesen, sodass das Scroll-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 grundlegendes Styling und wenden eine Animation darauf an. Wir setzen auch die --my-scroller-Timeline darauf, indem wir animation-timeline: --my-scroller verwenden. Um es zu wiederholen, 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 Scroll-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 pinkfarbenen Bereich, um das Quadrat zu animieren.
Spezifikationen
| Specification |
|---|
| Scroll-driven Animations # propdef-timeline-scope |
Browser-Kompatibilität
Loading…