::view-transition-old()

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

The ::view-transition-old() CSS pseudo-element represents the "old" view state of a view transition — a static snapshot of the old view, before the transition.

During a view transition, ::view-transition-old() is included in the associated pseudo-element tree as explained in The view transition pseudo-element tree, provided there's an "old" view state to represent. It is only ever a child of a ::view-transition-image-pair(), and never has any children.

It is a replaced element and therefore can be manipulated with properties such as object-fit and object-position. It has natural dimensions equal to the content's size.

The following default styling is included in the UA stylesheet:

:root::view-transition-old(*),
:root::view-transition-new(*) {
  position: absolute;
  inset-block-start: 0;
  inline-size: 100%;
  block-size: auto;

  animation-duration: inherit;
  animation-fill-mode: inherit;
  animation-delay: inherit;
}

/* Keyframes for blending when there are 2 images */
@keyframes -ua-mix-blend-mode-plus-lighter {
  from {
    mix-blend-mode: plus-lighter;
  }
  to {
    mix-blend-mode: plus-lighter;
  }
}

@keyframes -ua-view-transition-fade-out {
  to {
    opacity: 0;
  }
}

Note: Additional view transition styles are also setup to animate ::view-transition-old(). These are dynamically generated during the view transition; see the specification setup transition pseudo-elements and update pseudo-element styles sections for more details.

Syntax

::view-transition-old([ <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 root view 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 the view-transition-name property.
<pt-name-selector>: The <custom-ident> set as the value of the view-transition-name property.
<pt-class-selector>: The <custom-ident> set as the value of the view-transition-class property preceded by a period (.).

Examples

figcaption {
  view-transition-name: figure-caption;
}

@keyframes grow-x {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@keyframes shrink-x {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}

::view-transition-old(figure-caption),
::view-transition-new(figure-caption) {
  height: auto;
  right: 0;
  left: auto;
  transform-origin: right center;
}

::view-transition-old(figure-caption) {
  animation: 0.25s linear both shrink-x;
}

::view-transition-new(figure-caption) {
  animation: 0.25s 0.25s linear both grow-x;
}

Specifications

Specification
CSS View Transitions Module Level 1 # ::view-transition-old

Browser compatibility

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android
`::view-transition-old`	109	109	preview	95	18	109	No	74	18	21.0	109

Syntax

Parameters

Examples

Specifications

Browser compatibility

See also