::view-transition-image-old

The CSS ::view-transition-image-old pseudo-element is part of the View Transitions API that lets us select the “before” snapshot in a view transition.

::view-transition-image-old(*) {
  animation-duration: 700ms;
}

For context’s sake, ::view-transition-image-old is one pseudo-element in a tree of pseudo-elements the browser establishes when a view transition is registered on the page. The ::view-transition pseudo-element is the tree’s “root” and ::view-transition-image-pair is two levels deep, contained in the ::view-transition-group pseudo-element.

And inside the ::view-transition-image-pair is where we’ll find ::view-transition-image-old:

::view-transition
├─ ::view-transition-group(name-1)
│  └─ ::view-transition-image-pair(name-1)
│     ├─ ::view-transition-old(name-1)
│     └─ ::view-transition-new(name-1)
├─ ::view-transition-group(name-2)
│  └─ ::view-transition-image-pair(name-2)
│     ├─ ::view-transition-old(name-2)
│     └─ ::view-transition-new(name-2)
│ /* and so one... */

This makes ::view-transition-image-old a direct child of the ::view-transition-image-pair. The image pair also contains the view traditions “new” snapshot, ::view-transition-image-new.

These two pseudos represent the “old” state before the view transition begins and the “new” state it transitions to, respectively. So, ::view-transition-image-pair becomes a handy way to select and style both of those states together.

The specification calls this the pseudo “View Transition Old State Image” which is pretty on the nose considering that it is indeed an image of the view transition that the browser captures before the transition runs and then transitions to the new state.

Syntax

::view-transition-image-old(<pt-name-selector>) {
  /* Styles */
}

The pseudo-element accepts a <pt-name-selector> in its argument, which is equal to one of the following:

• <custom-ident>: Use this to select a specific transition “old” image in the ::view-transition pseudo tree. For example, if a particular element has a view-transition-name of gallery, then you would use ::view-transition-image-old(gallery) to select that transition group.
• root: This value matches :root::view-transition-old(*) which is a selector set up by the browser to match any view transition “old” image that is not assigned to a specific view transition via the CSS view-transition-name property.
• Universal selector (*): Use this to select all “old” states of a view transition on a page.

Default styles

The specification defines the default styles for browsers to set on ::view-transition-image-old like this:

: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;
}

Notice that the default styles target all view transitions with the Universal Selector (*). We can override these by selecting a specific view-transition-name:

::view-transition-old(gallery) {
  animation-duration: 500ms;
}

Specification

The CSS ::view-transition-image-old pseudo-element is defined in the CSS View Transitions Module Level 1 specification. The specification is labeled a Candidate Recommendation Snapshot, meaning it’s been widely reviewed and intended to become an official W3C Recommendation, but it is still being tested in the wild.

The specification further states:

This document is intended to become a W3C Recommendation; it will remain a Candidate Recommendation at least until 5 December 2023 to gather additional feedback.

That date has passed as of this writing, so keep an eye on the document’s status as it becomes a recommended feature.

Browser support