Cross-document view transitions
The @view-transition CSS rule sets whether a document opts-in to transitions between documents in a multi-page application. Both the old and new document must opt-in for a transition to be triggered.
Overview
The @view-transition CSS rule sets whether a document opts-in to transitions between documents in a multi-page application. Both the old and new document must opt-in for a transition to be triggered.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 126 | 126 | | 18.2 | 126 | 18.2 | |
| DOM API | ||||||
| The CSSViewTransitionRule interface represents a CSS @view-transition at-rule. | 126 | 126 | | 18.2 | 126 | 18.2 |
| The navigation read-only property of the CSSViewTransitionRule interface returns the associated @view-transition at-rule's navigation descriptor value. | 126 | 126 | | 18.2 | 126 | 18.2 |
| The types read-only property of the CSSViewTransitionRule interface returns an array containing the associated @view-transition at-rule's types descriptor values. | 126 | 126 | | 18.2 | 126 | 18.2 |
Syntax
@view-transition {
navigation: auto;
}
::view-transition-old(root) {
animation: fade-out 0.3s;
}Live demo
Use cases
State transitions
Use Cross-document view transitions to clarify UI changes such as opening, reordering, or page transitions.
Polished feedback
Add motion only where it reinforces direction, hierarchy, or system response.
Cautions
- Motion features can quickly become distracting if they are applied too broadly.
- Keep animation rules paired with sensible non-animated fallbacks.
Accessibility
- Respect reduced-motion preferences and keep essential information available without animation.
- Motion should support understanding, not become a barrier to interaction.
Related links
Powered by web-features