CSS ::view-transition-new()

The ::view-transition-new() pseudo-element represents the new visual state after the DOM update in a View Transition API animation.

Syntax

::view-transition-new(root) {
  animation: fade-in 0.3s ease;
}

Example

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

@keyframes fade-in {
  from { opacity: 0; }
}
Result:

The new state can be animated separately from the old snapshot.

Important note

Create the transition with the View Transition API first; the pseudo-element is not available outside an active transition.