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-Fortschritt-Zeitleiste zu definieren, die durch Scrollen eines scrollbaren Elements (Scroller) zwischen oben und unten (oder links und rechts) fortschreitet. scroll-timeline-name wird auf dem Scroller gesetzt, der die Zeitleiste bereitstellen wird.

Der Name wird dann in einer animation-timeline Deklaration referenziert, um das Containerelement anzugeben, das den Fortschritt der Animation durch die Scroll-Aktion antreibt.

Hinweis: Wenn das Element in der Achsrichtung nicht über seinen Container hinausragt 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

css

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-Fortschritt-Zeitleiste definiert, der dann in einer animation-timeline Eigenschaft referenziert werden kann.

Hinweis: <dashed-ident> Werte müssen mit -- beginnen, was hilft, Namenskonflikte mit standardmäßigen 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-Fortschritt-Zeitleiste-Animation

In diesem Beispiel wird eine Scroll-Zeitleiste mit dem Namen --square-timeline definiert, indem die scroll-timeline-name Eigenschaft auf dem Element mit der ID container verwendet wird. Diese wird dann auf die Animation auf dem #square Element angewendet, indem animation-timeline: --square-timeline verwendet wird.

HTML

Der HTML-Code für das Beispiel wird unten gezeigt.

html

<div id="container">
  <div id="square"></div>
  <div id="stretcher"></div>
</div>

CSS

Der CSS-Code für den Container legt fest, dass er die Quelle einer Scroll-Zeitleiste mit dem Namen --square-timeline ist, indem die scroll-timeline-name Eigenschaft verwendet wird. Hier ist keine Scrollbar-Achse definiert, da standardmäßig die vertikale Achse verwendet wird.

Die Höhe des Containers ist auf 300px gesetzt, und der Container wird auch so eingestellt, dass er eine vertikale Scrollbar erstellt, wenn er überläuft (die CSS height Regel auf dem stretcher Element unten lässt den Inhalt den Container überlaufen).

css

#container {
  height: 300px;
  overflow-y: scroll;
  scroll-timeline-name: --square-timeline;
  position: relative;
}

Der folgende CSS-Code definiert ein Quadrat, das sich gemäß der Zeitleiste dreht, die durch die animation-timeline Eigenschaft bereitgestellt wird, die auf die oben genannte --square-timeline Zeitleiste gesetzt ist.

css

#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 Inhalte erzeugt, die das Containerelement überlaufen lassen und dadurch Scrollleisten erzeugt. Ohne dieses Element würde der Inhalt den Container nicht überlaufen, es gäbe keine Scrollbar und folglich keine Scroll-Zeitleiste, die mit der Animationszeitleiste verknüpft werden könnte.

Ergebnis

Scrollen Sie die vertikale Leiste, um das Quadrat beim Scrollen zu animieren.

Spezifikationen

Specification
Scroll-driven Animations # scroll-timeline-name