How to Configure Strict CSS View-Transition-Group in Google Chrome

Modern web animations increasingly prioritize spatial continuity: when navigating between a product catalog grid and an expanded detail view, thumbnail images and header titles should morph smoothly across positions and dimensions. In Google Chrome, the View Transitions API constructs an implicit pseudo-element tree topped by ::view-transition-group(<name>). Mastering strict styling and timing function controls on view transition groups allows authors to isolate morphing geometry from opacity cross-fades, delivering cinema-grade user interface animations.

Architecture of the View Transition Pseudo-Tree

When an element declares a unique view-transition-name, the browser isolates it from the generic root document cross-fade. Instead, Chrome generates a dedicated four-layer pseudo-element branch:

• ::view-transition-group(<name>): Responsible for animating the element bounding box geometry (physical screen coordinates, width, and height).
• ::view-transition-image-pair(<name>): An isolation wrapper that manages the blending and stacking context of the old and new element snapshots.
• ::view-transition-old(<name>): A static raster snapshot of the element before the DOM mutation.
• ::view-transition-new(<name>): A live raster snapshot of the element rendered after the DOM mutation.

Configuring Strict Geometry Easing on Transition Groups

By default, Chrome applies a uniform 0.25s linear cross-fade and geometry interpolation. To customize how an image morphs across viewport coordinates while ensuring smooth optical physics:

/* Assign semantic view transition identifier */
.product-hero-image {
  view-transition-name: product-hero-expand;
  contain: layout;
}

/* Customise geometry morphing independently */
::view-transition-group(product-hero-expand) {
  animation-duration: 0.4s;
  animation-timing-function: cubic-bezier(0.2, 0, 0, 1); /* Emphasised deceleration */
}

/* Customise cross-fade opacity transitions */
::view-transition-old(product-hero-expand) {
  animation: 0.15s ease-out both fade-out;
}

::view-transition-new(product-hero-expand) {
  animation: 0.3s ease-in 0.1s both fade-in;
}

@keyframes fade-out {
  to { opacity: 0; }
}

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

This decoupling ensures the physical bounding box translates and resizes along an organic bezier curve while the underlying image assets cross-fade without visual shudder.

Overriding Transition Group Sizing and Containment

When morphing components whose aspect ratios change significantly (such as expanding a square thumbnail into a panoramic banner):

::view-transition-old(product-hero-expand),
::view-transition-new(product-hero-expand) {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

Declaring object-fit: cover prevents image distortion as the parent ::view-transition-group interpolates width and height at different rates.

Auditing Transition Groups in Chrome DevTools

Google Chrome provides specialized DevTools tooling to audit active view transition groups:

1. Open DevTools (F12) and select the Animations tab (via More Tools > Animations).
2. Trigger a view transition navigation. Chrome captures the view transition snapshot.
3. Pause or scrub the animation timeline to 20% speed.
4. In the Elements panel, expand the ::view-transition tree to inspect ::view-transition-group computed styles.
5. Inspect layout bounding boxes to verify that element coordinates interpolate smoothly without layout jumps.