CSS/Funktionen/view()

Browserunterstützung
caniuse.com

Die CSS-Funktion view() kann zusammen mit animation-timeline verwendet werden, um ein Element anzugeben, das eine anonyme Zeitleiste für den Fortschritt der Animation bereitstellt. Die Ansicht-Fortschrittszeitleiste wird durch eine Änderung der Sichtbarkeit des betreffenden Elements innerhalb des nächstgelegenen übergeordneten Scrollers fortgeschritten.

Die Sichtbarkeit des Elements innerhalb des Scrollers wird verfolgt – standardmäßig liegt die Zeitleiste bei 0 %, wenn das Element zum ersten Mal an einer Kante des Scrollers sichtbar wird, und bei 100 %, wenn es die gegenüberliegende Kante erreicht.

anwendbar auf

animation-timeline

Parameter

view(<axis> <inset>)

• Axis: Scrollbar-Achse
  • block
  • inline
  • x
  • y
• <inset>: Der Wert für „inset“ kann ein oder zwei Werte sein, entweder „auto“ oder ein <Längenprozentsatz>. Er gibt eine Anpassung des Scrollports nach innen (positiv) oder außen (negativ) an. Der Wert für „inset“ wird verwendet, um zu bestimmen, ob das Element sichtbar ist, wodurch die Länge der Animationszeitleiste festgelegt wird. Mit anderen Worten: Die Animation dauert so lange, wie das Element in der nach „inset“ angepassten Ansicht sichtbar ist.

Beispiel

animation-timeline: view();

/* Values for selecting the axis */
animation-timeline: view(block); /* Default */
animation-timeline: view(inline);
animation-timeline: view(y);
animation-timeline: view(x);

/* Values for the inset */
animation-timeline: view(auto); /* Default */
animation-timeline: view(20%);
animation-timeline: view(200px);
animation-timeline: view(20% 40%);
animation-timeline: view(20% 200px);
animation-timeline: view(100px 200px);
animation-timeline: view(auto 200px);

/* Examples that specify axis and inset */
animation-timeline: view(block auto); /* Default */
animation-timeline: view(inline 20%);

 

Siehe auch

• OnePager

Weblinks

• CSSWG: The view() notation Scroll-driven Animations
• MDN: view()
• Browser-Support: caniuse.com