New data-type: <axis>

files/en-us/web/css/guides/scroll-driven_animations/index.md

@@ -128,10 +128,8 @@ Scroll the element in the inline direction to see its background color change. S
 
 ### Data types and values
 
-<!--
-- {{cssxref("axis")}}
+- [`<axis>`](/en-US/docs/Web/CSS/Reference/Values/axis) <!---
 - {{cssxref("scroller")}} -->
-
 - [`<timeline-range-name>`](/en-US/docs/Web/CSS/Reference/Properties/animation-range#timeline-range-name)
 
 ### Functions

files/en-us/web/css/reference/values/axis/index.md

@@ -0,0 +1,50 @@
+---
+title: <axis>
+slug: Web/CSS/Reference/Values/axis
+page-type: css-type
+browser-compat: css.types.axis
+spec-urls: https://drafts.csswg.org/scroll-animations/#typedef-axis
+sidebar: cssref
+---
+
+The **`<axis>`** {{glossary("enumerated")}} data type specifies the scrolling direction of the {{glossary("scroll container")}} controlling a [scroll timeline](/en-US/docs/Web/CSS/guides/Scroll-driven_animations/Timelines).
+
+The `<axis>` keyword values are used in the following [CSS functions](/en-US/docs/Web/CSS/Reference/Values/Functions) and properties:
+
+- {{cssxref("scroll-timeline-axis")}}
+- {{cssxref("scroll-timeline")}} shorthand
+- [`scroll()`](/en-US/docs/Web/CSS/Reference/Properties/animation-timeline/scroll)
+- {{cssxref("view-timeline-axis")}}
+- {{cssxref("view-timeline")}} shorthand
+- [`view()`](/en-US/docs/Web/CSS/Reference/Properties/animation-timeline/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](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations/Timelines) guide
+- [CSS scroll-driven animations](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations) module