::view-transition-image-pair
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The ::view-transition-image-pair
CSS pseudo-element represents a container for a view transition's "old" and "new" view states — before and after the transition.
During a view transition, ::view-transition-image-pair
is included in the associated pseudo-element tree as explained in The view transition process. It is only ever a child of a ::view-transition-group
. In terms of children, it can have a ::view-transition-new
or a ::view-transition-old
, or both.
::view-transition-image-pair
is given the following default styling in the UA stylesheet:
css
html::view-transition-image-pair(*) {
position: absolute;
inset: 0;
animation-duration: inherit;
animation-fill-mode: inherit;
}
During a view transition, ::view-transition-image-pair
has isolation: isolate
set on it in the view transition style sheet so that its children can be blended with non-normal blend modes without affecting other visual outputs.
Syntax
css
::view-transition-image-pair(<pt-name-selector>) {
/* ... */
}
<pt-name-selector>
can be one of the following values:
*
-
Causes the pseudo-element to match all view transition groups.
root
-
Causes the pseudo-element to match the default
root
view transition group created by the user agent to contain the view transition for the overall page, meaning any element not assigned to its own specific view transition group via theview-transition-name
property. <custom-ident>
-
Causes the pseudo-element to match a specific view transition group created by assigning the given
<custom-ident>
to an element via theview-transition-name
property.
Examples
css
::view-transition-image-pair(root) {
isolation: auto;
}
Specifications
Specification |
---|
CSS View Transitions Module Level 1 # ::view-transition-image-pair |
Browser compatibility
BCD tables only load in the browser