coderef

Cross-document view transitionsLimited availability

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.

Not yet supported in all major browsers — check the table and provide a fallback.

How to use ↓Compare browsers

Browser support

DesktopChrome
1–125Not supported
126+Supportedsince Jun 11, 2024
Current: 155
Edge
12–125Not supported
126+Supportedsince Jun 13, 2024
Current: 154
Firefox
✕Not supportedup to 157
Current: 157
Safari
1–18.1Not supported
18.2+Supportedsince Dec 11, 2024
Current: 27
MobileChrome Android
18–125Not supported
126+Supportedsince Jun 11, 2024
Current: 155
Firefox Android
✕Not supportedup to 157
Current: 157
Safari iOS
1–18.1Not supported
18.2+Supportedsince Dec 11, 2024
Current: 27

How to use

Not supported in Firefox, Firefox Android. Use feature detection below and provide a fallback (or a polyfill) for those browsers.

Example

CSS
/* Opt in on both the old and the new page */
@view-transition {
  navigation: auto;
}

/* Morph the same element between pages */
.hero-image {
  view-transition-name: hero;
}

Feature detection

JS · check before using
if ("CSSViewTransitionRule" in globalThis) {
  // CSSViewTransitionRule is available
} else {
  // load a polyfill or use a fallback
}

Documentation (MDN)

Specification

Usage share

Sub-features

Support for each part of the feature (4). The overall table above shows when the whole feature works.

Sub-featureChromeEdgeFirefoxSafariChrome AndroidFirefox AndroidSafari iOS
CSSViewTransitionRule126126✕18.2126✕18.2
CSSViewTransitionRule.navigation126126✕18.2126✕18.2
CSSViewTransitionRule.types126126✕18.2126✕18.2
@view-transition126126✕18.2126✕18.2