::view-transition

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-group()s as children.

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

:root::view-transition {
 position: fixed;
 inset: 0;
}

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

Syntax

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

Examples

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

Specifications

Browser compatibility

See also

• View Transition API
• Smooth transitions with the View Transition API