CSS ::view-transition

The ::view-transition pseudo-element is the root of the View Transition overlay. It exists while a view transition is running and contains the generated transition groups.

Syntax

::view-transition {
  pointer-events: none;
}

Example

::view-transition {
  pointer-events: none;
}

/* JavaScript starts the transition */
document.startViewTransition(() => {
  document.body.classList.toggle("compact");
});

Result:

The pseudo-element is generated by the browser during a View Transition API animation.

Important note

You do not attach ::view-transition to an ordinary element. Start a transition with document.startViewTransition() or cross-document view transitions.