::view-transition-group() CSS Pseudo Element

The ::view-transition-group() pseudo-element represents a container layer created by the View Transitions API that groups together the visual transition of an element as it moves between two states (typically between DOM updates or page navigations). It acts as the structural wrapper that holds both the old and new visual snapshots during a transition, allowing developers to animate how an element morphs, moves, fades, or transforms across states. This grouping behavior is what enables smooth, native-feeling transitions without manually duplicating elements or managing complex animation timelines.

When a view transition occurs, the browser captures the “old” and “new” visual states of elements that participate in the transition. These snapshots are placed inside a generated structure where ::view-transition-group() becomes the parent container. Inside this group, the browser inserts two child pseudo-elements: ::view-transition-old() and ::view-transition-new(). The group itself does not represent content you authored directly, but instead provides a styling hook that allows you to control how both states animate together - such as scaling, clipping, or fading the entire transition as a unit.

The ::view-transition-group() pseudo-element is especially useful when you want consistent motion across UI changes, such as page navigation, tab switching, or dynamic content replacement. By applying CSS properties like transform, opacity, or animation to the group, you can define high-level motion behavior while still allowing the old and new states to crossfade or morph internally. This separation of concerns makes transitions easier to reason about and more maintainable than manual animation logic.

Unlike regular elements such as div, the ::view-transition-group() pseudo-element only exists during an active transition and is fully managed by the browser. You cannot place content inside it directly, but you can style it declaratively. This design ensures performance efficiency while giving developers precise control over how transitions feel and behave across different UI states.

Example: Styling a View Transition Group

::view-transition-group(card) {
  animation: fade-scale 400ms ease-in-out;
}

@keyframes fade-scale {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

<div class="card" style="view-transition-name: card;">
  Card content here
</div>

In this example, the element with the view-transition-name of card participates in a transition. The ::view-transition-group(card) pseudo-element applies a smooth fade-and-scale animation to the entire transition, affecting both the old and new visual states together. This results in a polished, cohesive animation without needing JavaScript-driven animations.