coderef

view-transition-classBaseline · Newly available

The view-transition-class CSS property sets a name that can be used to apply styles to multiple named view transition pseudo-elements.

Works in the latest version of every major browser, but older devices may not support it yet. Baseline since Oct 14, 2025.

Browser support

DesktopChrome
1–124Not supported
125+Supportedsince May 14, 2024
Current: 155
Edge
12–124Not supported
125+Supportedsince May 17, 2024
Current: 154
Firefox
1–143Not supported
144+Supportedsince Oct 14, 2025
Current: 157
Safari
1–18.1Not supported
18.2+Supportedsince Dec 11, 2024
Current: 27
MobileChrome Android
18–124Not supported
125+Supportedsince May 14, 2024
Current: 155
Firefox Android
4–143Not supported
144+Supportedsince Oct 14, 2025
Current: 157
Safari iOS
1–18.1Not supported
18.2+Supportedsince Dec 11, 2024
Current: 27

How to use

Every current browser supports this, but it only became Baseline on Oct 14, 2025. Use it as a progressive enhancement, or keep a fallback if you support older devices.

Example

Full syntax and examples are on MDN: view-transition-class.

Feature detection

CSS · check before using
@supports (view-transition-class: initial) {
  /* styles that rely on view-transition-class */
}

/* or in JavaScript */
if (CSS.supports("view-transition-class", "initial")) {
  // use it
}

Sub-features

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

Sub-featureChromeEdgeFirefoxSafariChrome AndroidFirefox AndroidSafari iOS
view-transition-class12512514418.212514418.2
view-transition-class.none12512514418.212514418.2