::view-transition
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
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 ::view-transition-group
s 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: rgba(0, 0, 0, 0.25);
}
Specifications
Specification |
---|
CSS View Transitions Module Level 1 # selectordef-view-transition |
Browser compatibility
BCD tables only load in the browser