CSS ::view-transition-old()

The ::view-transition-old() pseudo-element represents the old visual snapshot captured before a view transition updates the DOM.

Syntax

::view-transition-old(root) {
  animation: fade-out 0.3s ease;
}

Example

::view-transition-old(root) {
  animation: fade-out 0.3s ease both;
}

@keyframes fade-out {
  to { opacity: 0; }
}
Result:

The old snapshot exists only during the transition.

Important note

Use the argument root, * or a custom view-transition-name. It is not a normal DOM element.