Cross-document view transitions
The @view-transition CSS at-rule is used to opt in the current and destination documents to undergo a view transition, in the case of a cross-document navigation.
For a cross-document view transition to work, the current and destination documents of the navigation need to be on the same origin.
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.