CSS view-timeline-axis Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The view-timeline-axis property controls which geometric axis of a view timeline is used to compute timeline progress. In practice this means it selects the direction along which a container’s position or scroll offset is interpreted when converting a view’s motion into a normalized timeline progress value. This affects how animations or timeline-driven effects map an element’s motion to progress: the chosen axis determines whether movement left-to-right, top-to-bottom, or along a logical inline/block direction contributes to advancing or reversing the timeline.

Because axes in CSS can be logical (dependent on writing-mode and direction) as well as physical, the property is meaningful in multi-lingual and rotated layouts. When authors design timeline-driven effects for components that change writing mode or are used inside transformed or rotated containers, the axis choice ensures the timeline reflects the intended motion - for example, using the container’s inline progression for text flows or its block progression for vertical scrolling. This makes timelines robust across different layout contexts without rewriting animation logic for each orientation.

The property also interacts with named timelines and animation attachment: a timeline declared or referenced by name will use the axis to interpret the view’s motion before that progress is consumed by animations. Authors typically set the timeline axis in tandem with the timeline’s identity; see view-timeline-name for how timelines are named and targeted. Animations that pull their timing from a view timeline then read that axis-resolved progress to drive their interpolation; for details on attaching animations to timelines see animation-timeline.

Finally, the property is useful for complex UI patterns like synchronized multi-axis scroll effects, parallax layers, or interactions where progress should track a particular directional metric rather than a generic scalar. By decoupling which axis is measured from the animation logic, designers can reuse the same timeline-driven animations across components that have different layout orientations or scrolling behaviors, keeping motion semantics consistent while adapting to the document’s geometry.

Definition

Initial value: block
Applies to: all elements
Inherited: no
Computed value: a list of the keywords specified
Animatable: no
JavaScript syntax: object.style.viewTimelineAxis

Syntax

view-timeline-axis: <axis>;

Values

blockThe timeline progresses along the block axis (vertical in most writing modes, e.g., top-to-bottom).
inlineThe timeline progresses along the inline axis (horizontal in most writing modes, e.g., left-to-right).
inline-axis(alias for inline) – Sometimes used interchangeably with inline.
block-axis(alias for block) – Sometimes used interchangeably with block.
normalUses the default axis for the timeline (usually block).

Example

HTML

<div class="scroll-container">

  <div class="spacer">Scroll down to see the effect</div>

  <div class="animating-box"></div>

  <div class="spacer">Keep scrolling...</div>

</div>

CSS

/* 1. Define the scroll container */
.scroll-container {
  height: 300vh; /* Make the page long enough to scroll */
  background: #f0f0f0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.spacer {
  height: 100vh;
  display: flex;
  align-items: center;
  font-family: sans-serif;
  color: #666;
}

/* 2. The element we want to animate */
.animating-box {
  width: 150px;
  height: 150px;
  background: coral;
  border-radius: 8px;

  /* Set the named view timeline */
  view-timeline-name: --reveal;
  
  /* Set the axis: 'block' is vertical, 'inline' is horizontal */
  view-timeline-axis: block;

  /* Link the animation to the timeline */
  animation: fadeIn linear;
  animation-timeline: --reveal;
  
  /* Ensure the animation doesn't jump back at the end */
  animation-fill-mode: both;
}

/* 3. The animation keyframes */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1.2);
  }
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS view-timeline-axis property. Hover over a browser icon to see the version that first introduced support for this CSS property.