::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 the view-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 the view-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

See also