CSS View Transitions

Advanced

CSS View Transitions provide a CSS-controlled visual layer for transitions between document states. Level 1 defines view-transition-name and the generated view-transition pseudo-element tree. Level 2 extends the CSS surface with cross-document opt-in, transition types, shared transition classes, automatic names, and nested transition groups. This lesson owns those CSS concepts; it does not replace the Animations lesson, which owns general @keyframes and animation properties, and it does not turn the JavaScript View Transition API into a separate curriculum owner.

The W3C CSS View Transitions Module Level 1 is a Candidate Recommendation Draft dated 28 March 2024. The latest published Level 2 Working Draft is dated 13 November 2024, while the live CSSWG Editor’s Draft is dated 31 August 2026. This lesson follows the live Editor’s Draft for current Level 2 CSS details and labels those additions as draft material; the published W3C TR remains the stable publication snapshot.

The view-transition model

A view transition separates a visual transition from the underlying DOM update. The user-visible document can change state while the browser constructs a separate tree of view-transition pseudo-elements representing captured old and new visual states. CSS then styles and animates that transition layer.

?

Naming elements for independent transitions

Level 1 uses view-transition-name to tag an element for independent capture. The value is none or a custom identifier. A participating name must be unique within the relevant captured state; duplicate simultaneous names can abort the transition. Naming an element does not create a DOM relationship or an accessibility relationship.

view-transition-name: ?;

Reading the generated pseudo-element tree

The Level 1 transition tree is rooted at ::view-transition. Each named capture can produce a ::view-transition-group(name), containing ::view-transition-image-pair(name), which in turn contains ::view-transition-old(name) and ::view-transition-new(name) when those states exist. These pseudo-elements are not part of the accessibility tree.

::view-transition-?(hero)

Styling the transition layer without owning animations

The generated pseudo-elements can be styled with ordinary CSS properties and can be animated with CSS Animations. The Animations curriculum owns the animation system itself; this lesson owns which view-transition pseudo-elements receive those animations and what each pseudo-element represents. Level 1 also establishes default behavior such as cross-fading and animating group size and screen-space transform between captured states.

::view-transition-new(? )

Cross-document transitions with @view-transition

Level 2 adds the @view-transition rule for cross-document navigations. Its navigation descriptor accepts auto or none. For auto, the specification defines eligibility conditions including same-origin navigation and excludes reloads and certain browser-UI navigations. The opt-in must be present in both the old and new documents for the cross-document transition.

@view-transition {
  navigation: ?;
}

Transition types and selective CSS

Level 2 lets a transition carry active types. CSS can react to those types with :active-view-transition and :active-view-transition-type(). For cross-document transitions, the @view-transition types descriptor supplies the active types. This allows one page to contain CSS for several transition modes without every mode being active at once.

:root?:

Sharing styles with view-transition-class

Level 2 adds view-transition-class. Unlike view-transition-name, the class does not by itself capture an element. It supplies one or more names that can be used in named view-transition pseudo-element selectors, allowing multiple independently named captures to share transition styling.

view-transition-class: ?;

Automatic names with view-transition-name: auto

Level 2 adds auto as a value of view-transition-name. The used value can use the element id when it is associated with the same root, otherwise the user agent generates a unique internal string. Generated auto names are document-scoped and do not match across documents.

view-transition-name: ?;

Nested transition groups

A flat transition tree is not sufficient for every visual effect. The live Level 2 Editor’s Draft adds view-transition-group so a named transition can participate in a hierarchy, preserving relationships needed for effects such as clipping, opacity, masking, filtering, and 3D transforms. Its current model also uses ::view-transition-group-children() as the container for nested groups. The property accepts normal, contain, nearest, or a named transition group.

view-transition-group: ?;

Scoping a transition to a subtree

The live Level 2 Editor’s Draft adds view-transition-scope. With all, discovery of view-transition-name is limited to the scoped subtree for transitions that originate outside that element. This makes scoped transitions less likely to capture or collide with names belonging to unrelated parts of the document. Starting a transition on an element also implies view-transition-scope: all for the duration of that transition.

view-transition-scope: ?;

Ownership, accessibility, and fallback boundaries

View Transitions are a visual enhancement to a document state change. If the transition is skipped, the underlying state change still proceeds. The generated view-transition tree is not exposed to the accessibility tree, and the specification does not create or alter accessibility bindings. Authors must therefore preserve meaningful DOM semantics independently of the visual transition.

This lesson does not own DOM navigation, the Document.startViewTransition() API, ViewTransition promises, pageswap/pagereveal event processing, or application state management. Those are platform/API concerns. It also does not re-teach @keyframes, animation timing, transforms, clipping, masking, or overflow; it shows only how those existing CSS systems interact with the view-transition pseudo-elements.

?