Index

The <axis> {{glossary("enumerated")}} data type specifies the scrolling direction of the {{glossary("scroll container")}} controlling a scroll timeline.

The <axis> keyword values are used in the following CSS functions and properties:

• {{cssxref("scroll-timeline-axis")}}
• {{cssxref("scroll-timeline")}} shorthand
• {{cssxref("animation-timeline/scroll", "scroll()")}}
• {{cssxref("view-timeline-axis")}}
• {{cssxref("view-timeline")}} shorthand
• {{cssxref("animation-timeline/view", "view()")}}

Syntax

Valid <axis> values:

• block
  • : The block axis of the scroller element, which is the axis in the direction perpendicular to the flow of text within a line. For horizontal writing modes, such as standard English, this is the same as y, while for vertical writing modes, it is the same as x.
• inline
  • : The inline axis of the scroller element, which is the axis in the direction parallel to the flow of text in a line. For horizontal writing modes, this is the same as x, while for vertical writing modes, this is the same as y.
• x
  • : The horizontal axis of the scroller element.
• y
  • : The vertical axis of the scroller element.

Formal syntax

{{CSSSyntaxRaw(<axis> = block | inline | x | y)}}

Specifications

{{Specifications}}

Browser compatibility

{{Compat}}

See also

• {{cssxref("animation-timeline")}}
• Scroll-driven animation timelines guide
• CSS scroll-driven animations module