::view-transition-image-pair() CSS Pseudo Element

The ::view-transition-image-pair() pseudo-element represents the paired visual snapshot used during a View Transition animation. It acts as a temporary container that visually groups the old and new renderings of an element while a transition is occurring. This pairing allows the browser to animate between two visual states smoothly, enabling effects such as crossfades, morphs, slides, or custom transforms. Unlike regular pseudo-elements, this one exists only during an active view transition and is automatically created and removed by the browser.

During a transition, the browser captures two visual representations of an element: one from before the DOM update and one from after. These are internally represented by ::view-transition-old() and ::view-transition-new(). The ::view-transition-image-pair() pseudo-element acts as their shared wrapper, allowing developers to apply transformations, clipping, opacity changes, or layout adjustments that affect both states together. This is especially useful when you want to control how the two snapshots relate spatially during the animation rather than styling them independently.

The pseudo-element is commonly styled using properties such as transform, opacity, animation, or clip-path. Because it represents a visual composite rather than a real DOM node, layout-affecting properties like width or display usually have no effect. Instead, it is best used for visual continuity - such as scaling content during navigation or creating zoom-style transitions between views.

A common use case is animating between pages or UI states triggered by JavaScript or navigation. The example below demonstrates how ::view-transition-image-pair() can be used to apply a smooth zoom effect during a transition:

::view-transition-image-pair(root) {
  animation: zoom-fade 400ms ease-in-out;
}

@keyframes zoom-fade {
  from {
    transform: scale(0.95);
    opacity: 0.6;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

In this example, the transition applies to the root view, smoothly scaling and fading between the old and new visual states. This works especially well when combined with navigation updates triggered via JavaScript or interactions inside elements such as main or section containers.