CSS @view-transition At-Rule
The @view-transition at-rule controls whether a document can participate in cross-document view transitions during eligible same-origin navigations. It can also configure navigation behavior for those transitions.
@view-transition Syntax
@view-transition {
navigation: auto;
}The example shows the rule in context. Check the support and status notes below before using this syntax.
How @view-transition Works
A cross-document view transition can animate between the old and new documents during a qualifying navigation. Both participating pages generally need to opt in using @view-transition with navigation: auto.
The @view-transition rule configures document-level view transitions, including whether same-origin navigation should trigger a cross-document transition.
The navigation Descriptor
The navigation descriptor accepts auto or none. The auto value enables eligible same-origin navigation transitions; none disables this opt-in. Browser support and navigation eligibility determine whether a transition runs.
The navigation descriptor accepts auto or none. Set navigation: auto in participating documents and use view-transition-name and ::view-transition-* pseudo-elements for customized animations.
Customizing the Animation
The @view-transition rule enables the transition but does not specify the visual animation. Use view-transition-name on elements and ::view-transition pseudo-elements to customize transitions.
::view-transition-old(root) {
animation-duration: 0.3s;
}
::view-transition-new(root) {
animation-duration: 0.3s;
}Cross-Document Limitations
Not every navigation triggers a transition. Same-origin requirements, browser support, user preferences, and navigation conditions can prevent a transition. Provide a usable page experience without animation.
@view-transition Example
Place this rule in the stylesheets of both pages involved in an eligible same-origin navigation. Navigate between those pages to see the browser-provided transition when supported.
@view-transition {
navigation: auto;
}Browser Support
Cross-document view transitions are supported in modern browsers, with differences across browser versions. Navigation must meet eligibility requirements. See Can I Use? and search for the relevant feature.
Cross-document transitions require compatible navigation conditions and browser support. Provide a normal navigation experience when transitions are unavailable.
Specifications
The @view-transition at-rule is defined by the CSS View Transitions specification. It is separate from the document-transition JavaScript API and the styling of view-transition pseudo-elements.