::view-transition-image-pair() CSS pseudo-element
Baseline
2025
Newly available
Since October 2025, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
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 pseudo-element tree. 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:
:root::view-transition-image-pair(*) {
position: absolute;
inset: 0;
animation-duration: inherit;
animation-fill-mode: inherit;
animation-delay: 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
::view-transition-image-pair([ <pt-name-selector> <pt-class-selector>? ] | <pt-class-selector>) {
/* ... */
}
Parameters
*-
The universal selector (
*); selects all view transition groups on a page. root-
Causes the pseudo-element to match the default
rootview transition snapshot group created by the user agent to contain the view transition for the overall page. This group includes any element not assigned to its own specific view transition snapshot group via theview-transition-nameproperty. <pt-name-selector>-
The
<custom-ident>set as the value of theview-transition-nameproperty. <pt-class-selector>-
The
<custom-ident>set as the value of theview-transition-classproperty preceded by a period (.).
Examples
::view-transition-image-pair(root) {
isolation: auto;
}
::view-transition-image-pair(.card) {
isolation: isolate;
}
Specifications
| Specification |
|---|
| CSS View Transitions Module Level 1 # ::view-transition-image-pair |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
::view-transition-image-pair()
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support