@view-transition CSS At-Rule

The @view-transition at-rule provides a scoped styling context that only applies during a document view transition. When a view transition is triggered, the browser creates temporary, composited representations of the outgoing and incoming content; rules declared inside this at-rule are applied to those transition-time representations rather than to the persistent document styles. This enables authors to specify how elements should appear, layer, and be visually treated for the duration of the transition without changing their normal styling outside the transition period.

Because the at-rule’s styles are applied to the transitional representations, it is especially useful for controlling layering, clipping, and visual continuity between states: you can adjust stacking order, opacity, transforms, and masking for the transition copies independently of the page’s regular layout rules. The block form acts like a temporal scope — the contained selectors participate in the normal cascade and specificity calculations while the transition is running, but have no long-term effect once the transition completes (unless the same selectors also match persistent stylesheet rules).

Practically, this lets designers create smooth handoffs between views and orchestrate shared element effects by differentiating the appearance of elements while they are in the transition layer. Because the transitions are composited by the browser, the usual performance advice applies: favor composited properties (opacity, transform, filter) and avoid heavy layout-triggering changes inside transition-time styles to keep the animation smooth and GPU-accelerated. Using custom properties inside the at-rule is a convenient way to parameterize transition visuals while keeping the persistent stylesheet unchanged.

Finally, treat the at-rule as a coordination mechanism between JavaScript-driven transition control and purely declarative styling. Scripts can initiate transitions and control their timing or state, while the at-rule provides a place to centralize transient styling rules for the transition lifecycle. This separation keeps transition-specific visual logic isolated, easier to reason about, and reversible, because the browser automatically removes the transition-scoped styles when the animation finishes.

@view-transition { navigation: auto | none; }

• auto

  This is the default behavior. When set to auto, the browser may automatically run a view transition when a navigation occurs (such as a same-document or same-origin navigation that qualifies for a transition).

  This allows smooth animated transitions between page states without requiring manual JavaScript control.

• none

  When set to none, automatic view transitions triggered by navigation are disabled.

  This is useful when:

  • You want full manual control via the View Transition API.
  • You want to avoid unexpected animations during navigation.
  • A page has layout changes that should not animate automatically.

The following information will show you the current browser support for the CSS at-rule @view-transition. Hover over a browser icon to see the version that first introduced support for this CSS at-rule.

This at-rule is supported in some modern browsers, but not all.

Desktop

Tablets & Mobile