scroll-timeline

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Die scroll-timeline CSS Kurzschreibweise wird verwendet, um eine benannte Scroll-Fortschritts-Zeitachse zu definieren, die durch Scrollen eines scrollbaren Elements (Scroller) zwischen oben und unten (oder links und rechts) fortschreitet.

Zusammengesetzte Eigenschaften

Diese Eigenschaft ist eine Kurzschreibweise für die folgenden CSS-Eigenschaften in dieser Reihenfolge:

Syntax

css

/* One value */
scroll-timeline: none;
scroll-timeline: --custom_name_for_timeline;

/* Two values */
scroll-timeline: --custom_name_for_timeline block;
scroll-timeline: --custom_name_for_timeline x;
scroll-timeline: none inline;
scroll-timeline: none y;

/* Global values */
scroll-timeline: inherit;
scroll-timeline: initial;
scroll-timeline: revert;
scroll-timeline: revert-layer;
scroll-timeline: unset;

Werte

<scroll-timeline-name>: Ein <dashed-ident> oder das Schlüsselwort none.
<scroll-timeline-axis>: Ein <axis> Schlüsselwort. Der Standardwert ist block.

Beschreibung

Die Kurzschreibweise scroll-timeline kann auf ein Containerelement angewendet werden, um sowohl die Eigenschaften scroll-timeline-name als auch scroll-timeline-axis festzulegen. Sie wird auf den Scroller gesetzt, der die Zeitachse bereitstellt. Wenn das Container-Element keinen Überlauf zum Scrollen hat oder der Überlauf versteckt oder abgeschnitten ist, wird keine Zeitachse erstellt.

Der Wert für das scroll-timeline-name, falls nicht auf none gesetzt, muss ein <dashed-ident> sein, was bedeutet, dass er mit -- beginnen muss. Dies hilft, Namenskonflikte mit standardmäßigen CSS-Schlüsselwörtern zu vermeiden. Der Name kann dann als Wert der animation-timeline-Eigenschaft eines Elements verwendet werden, um das scrollende Containerelement festzulegen, das seine Animations-Zeitachse definiert und den Fortschritt der Animation während des Scrollens steuert.

Der optionale scroll <axis> Wert definiert die scroll-timeline-axis, die bei Auslassung standardmäßig block ist. Wenn sowohl ein Name als auch eine Achse angegeben sind, muss die Reihenfolge zuerst den <scroll-timeline-name> und dann den <axis> Wert aufweisen. Wenn die <axis> zuerst aufgeführt ist, ist die Deklaration ungültig und wird ignoriert.

Formale Definition

Anfangswert	wie die jeweiligen Kurzschreibweisen: `scroll-timeline-name`: `none` `scroll-timeline-axis`: `block`
Anwendbar auf	Scrollcontainer
Vererbt	Nein
Berechneter Wert	wie die jeweiligen Kurzschreibweisen: `scroll-timeline-name`: `none` or an ordered list of identifiers `scroll-timeline-axis`: wie angegeben
Animationstyp	wie die jeweiligen Kurzschreibweisen: `scroll-timeline-name`: Not animatable `scroll-timeline-axis`: Not animatable

Formale Syntax

scroll-timeline = 
  [ <'scroll-timeline-name'> <'scroll-timeline-axis'>? ]#  

<scroll-timeline-name> = 
  [ none | <dashed-ident> ]#  

<scroll-timeline-axis> = 
  [ block | inline | x | y ]#

Beispiele

Erstellen einer benannten Scroll-Fortschritts-Zeitachsen-Animation

In diesem Beispiel wird eine Scroll-Zeitachse mit dem Namen --square-timeline mithilfe der scroll-timeline-name-Eigenschaft auf das #container-Element definiert. Der Zeitachsenname wird dann mit animation-timeline: --square-timeline auf die Animation des #square-Elements angewendet.

HTML

Wir fügen einen Container mit zwei Kind-<div>-Elementen ein.

html

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

CSS

Wir setzen den Container auf 300px Höhe, um vertikal zu scrollen.

Mit der scroll-timeline-Eigenschaft definieren wir den Container als Quelle einer Scroll-Zeitachse mit dem Namen --square-timeline und legen explizit die standardmäßige vertikale Bildlaufleiste als Zeitachsencontroller fest.

css

#container {
  height: 300px;
  overflow-y: scroll;

  scroll-timeline: --square-timeline y;
  /* Firefox supports the non-standard vertical/horizontal syntax */
  scroll-timeline: --square-timeline vertical;

  position: relative;
}

Wir bieten Grundstile für das Quadrat an. Wir wenden die rotateAnimation mit der animation-name-Eigenschaft an. Standardmäßig würde dies die zeitbasierte Dokument-Zeitachse verwenden. Indem wir die animation-timeline-Eigenschaft auf die oben genannte --square-timeline-Zeitachse setzen, stellen wir das Quadrat so ein, dass es entsprechend der scroll-basierten Zeitachse gedreht wird, die im Fortschritt fortschreitet, während der Container scrollt.

css

#square {
  background-color: deeppink;
  width: 100px;
  height: 100px;
  position: absolute;
  bottom: 0;

  animation: rotateAnimation 1ms linear;
  animation-timeline: --square-timeline;
}

Wir stellen sicher, dass der Container überläuft, indem wir einen Dehnungsbereich definieren, der breiter als sein übergeordnetes Element ist. Ohne Inhalt, der den Container überläuft, gäbe es keine Bildlaufleiste und somit keine Scroll-Zeitachse. Wir definieren auch eine CSS-Keyframe-Animation, die die Elemente, auf die sie angewendet wird, um eine volle Rotation dreht.

css

#stretcher {
  height: 600px;
  background: #dedede;
}

@keyframes rotateAnimation {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@layer no-support {
  @supports not (scroll-timeline: --square-timeline) {
    body::before {
      content: "Your browser doesn't support the `scroll-timeline` property.";
      background-color: wheat;
      display: block;
      text-align: center;
      padding: 1em;
    }
  }
}

Ergebnis

Scrollen Sie die vertikale Leiste, um das Quadrat bei Ihrem Scrollvorgang zu animieren.

Das Quadrat animiert beim Scrollen. Bei Verwendung von scroll-timeline hängt die Dauer der Animation davon ab, wie schnell Sie scrollen, nicht vom Wert der animation-duration-Eigenschaft.

Spezifikationen

Specification
Scroll-driven Animations # scroll-timeline-shorthand

Browser-Kompatibilität

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden