index.md

title	slug	page-type	status	browser-compat
::view-transition	Web/CSS/::view-transition	css-pseudo-element	experimental	css.selectors.view-transition

{{CSSRef}}{{SeeCompatTable}}

The ::view-transition CSS pseudo-element represents the root of the view transitions overlay, which contains all view transitions 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 process. It is the top-level node of this tree, and has one or more {{cssxref("::view-transition-group")}}s as children.

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

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

All {{cssxref("::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

{{Specifications}}

Browser compatibility

{{Compat}}

See also

• View Transitions API
• Smooth and simple transitions with the View Transitions API