CSS <axis> Data Type

The CSS <axis> data type represents the scrolling direction of the scroll container that controls a scroll-driven animation timeline. It can use logical axis values that follow the document's writing mode or physical axis values that represent horizontal or vertical scrolling.

Syntax

The <axis> data type accepts one of four keyword values:

<axis> = block | inline | x | y

Values

Value	Description
`block`	Uses the block axis of the scroll container. In a horizontal writing mode, this normally corresponds to the vertical `y` axis.
`inline`	Uses the inline axis of the scroll container. In a horizontal writing mode, this normally corresponds to the horizontal `x` axis.
`x`	Uses the horizontal axis of the scroll container.
`y`	Uses the vertical axis of the scroll container.

How <axis> Works

The block and inline values are logical directions that depend on the writing mode. In a typical horizontal writing mode, block corresponds to the vertical axis and inline corresponds to the horizontal axis. In a vertical writing mode, these relationships change.

The x and y values are physical directions and do not change with the writing mode. The x value always represents the horizontal axis, while y always represents the vertical axis.

<axis> Example

The following examples show the four <axis> values with the scroll-timeline-axis property:

.block-axis { scroll-timeline-axis: block; }
.inline-axis { scroll-timeline-axis: inline; }
.x-axis { scroll-timeline-axis: x; }
.y-axis { scroll-timeline-axis: y; }

The <axis> data type is used by CSS properties that define the scrolling direction for scroll-driven animation timelines, including:

Specifications

The <axis> data type is defined in the Scroll-driven Animations specification .

CSS <axis> Data Type