CSS/Eigenschaften/scroll-timeline

Browserunterstützung
caniuse.com

Die Eigenschaft scroll-timeline wird verwendet, um eine benannte Scroll-Fortschrittszeitleiste zu definieren, die durch Scrollen eines scrollbaren Elements (Scroller) zwischen oben und unten (oder links und rechts) durchlaufen wird. scroll-timeline wird auf dem Scroller festgelegt, der die Zeitleiste bereitstellt. Die Startposition des Scrollvorgangs entspricht einem Fortschritt von 0 % und die Endposition einem Fortschritt von 100 %. Wenn die Position 0 % und die Position 100 % übereinstimmen (d. h. der Scroll-Container keinen Überlauf zum Scrollen aufweist), ist die Zeitleiste inaktiv.

Erlaubte Werte

Die scroll-timeline kann zwei Werte enthalten:

• einen Namen für die benannte Scroll-Fortschrittszeitleiste und
• einen optionalen Scroll-Achsenwert.

Vererbung steuernde Werte inherit, initial, unset und revert

Standardwert

none block

anwendbar auf

scrollende Container

Vererbung

nein

animierbar

nein

Beispiel

#container {
  height: 300px;
  overflow-y: scroll;
  scroll-timeline: --square-timeline y;
  /* Firefox supports the older "vertical" syntax */
  scroll-timeline: --square-timeline vertical;
  position: relative;
}

#square {
  background-color: deeppink;
  width: 100px;
  height: 100px;
  animation-name: rotateAnimation;
  animation-duration: 1ms; /* Firefox requires this to apply the animation */
  animation-timeline: --square-timeline;
  position: absolute;
  bottom: 0;
}

1=

Siehe auch

• OnePager (Tutorial, wie man eine Single-Page Webseite mit CSS und JavaScript attraktiver macht)

Weblinks

• CSSWG.org: # scroll-timeline-shorthand Scroll-driven Animations
• MDN: scroll-timeline
• Details: caniuse.com