::view-transition CSS Pseudo Element

The ::view-transition pseudo-element represents the root container used by the View Transitions API to animate visual changes between two states of a document. It acts as the top-level wrapper that orchestrates how snapshots of the “old” and “new” views are composited and animated during a transition. This pseudo-element does not correspond to a real DOM node; instead, it is a virtual rendering layer created by the browser when a view transition is triggered - typically via JavaScript using the View Transitions API or automatically during same-document navigations in supported browsers.

At a conceptual level, ::view-transition is responsible for defining the global animation context of a transition. It controls how all participating elements are stacked, clipped, and animated as the page moves from one visual state to another. Inside this container, the browser generates additional pseudo-elements such as snapshots of the “old” and “new” views, but ::view-transition itself acts as the parent coordination layer. Because of this, styles applied here affect the entire transition experience rather than individual elements. For example, setting animation timing or applying global effects (like fading or scaling) at this level can influence how seamless or dramatic the transition feels.

A key feature of ::view-transition is that it enables pure-CSS control over transitions that were previously only possible with JavaScript animations or heavy DOM manipulation. When combined with the view-transition-name property, developers can opt specific elements into the transition system, allowing them to animate smoothly between states. This is especially useful for UI changes such as page navigation, layout shifts, or content filtering, where visual continuity improves user experience. Although the transition is often initiated in JavaScript, the styling and animation logic live comfortably in CSS.

Another important aspect is that ::view-transition exists outside the normal document flow, meaning layout properties like margins or positioning do not behave as they would on standard elements. Instead, it behaves more like an overlay that temporarily takes control during the animation lifecycle. This makes it ideal for full-page effects without interfering with the underlying layout. You can still coordinate it with document-level structure, such as the body element, but the transition layer itself remains isolated and purpose-built for animation.

Basic Example

Below is a minimal example showing how ::view-transition can be styled to apply a global fade effect during a transition:

::view-transition {
  animation: fade-transition 300ms ease-in-out;
}

@keyframes fade-transition {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

In this example, whenever a view transition occurs, the entire transition layer fades in smoothly. This can be combined with more advanced animations applied to named transition elements for richer effects.

Practical Use Case

A common use case is page navigation where content updates without a full reload. By assigning a view-transition-name to key elements (such as headers or cards), you allow the browser to visually interpolate between old and new states while ::view-transition governs the overall animation timing and feel. This results in fluid, app-like navigation using mostly declarative CSS.