CSS ::view-transition-group()

The ::view-transition-group() pseudo-element is the container for a single named view transition. It contains the image pair for the old and new views.

Syntax

::view-transition-group(root) {
  animation-duration: 0.4s;
}

Example

.card {
  view-transition-name: product-card;
}

::view-transition-group(product-card) {
  animation-duration: 0.4s;
  animation-timing-function: ease-out;
}

Result:

Set view-transition-name on a real element, then style the generated group during the transition.

Important note

This selector does not animate a list by itself. It styles a generated group after the View Transition API creates snapshots.