::view-transition

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

The ::view-transition CSS pseudo-element represents the root of the view transitions overlay, which contains all view transition snapshot groups and sits over the top of all other page content.

During a view transition, ::view-transition is included in the associated pseudo-element tree as explained in The view transition pseudo-element tree. It is the top-level node of this tree, and has one or more ::view-transition-groups as children.

::view-transition is given the following default styling in the UA stylesheet:

css
html::view-transition {
  position: fixed;
  inset: 0;
}

All ::view-transition-group pseudo-elements are positioned relative to the view transition root.

Syntax

css
::view-transition {
  /* ... */
}

Examples

css
::view-transition {
  background-color: rgb(0 0 0 / 25%);
}

Specifications

Specification
CSS View Transitions Module Level 1
# selectordef-view-transition

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
::view-transition

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.

See also