How to Configure Strict CSS View-Transition-Old and New Scale Transformations in Google Chrome

Coordinating fluid spatial zooms and depth-based transitions across web document states requires explicit mathematical scaling between outgoing and incoming views. With Google Chrome’s native View Transition API, applying transform matrices directly to ::view-transition-old and ::view-transition-new ensures smooth hardware-accelerated scaling without triggering costly layout reflows or DOM invalidations.

The Mechanics of View Transition Spatial Scaling

During an active transition, Chromium encapsulates the snapshot tree inside an isolated GPU layer. If developers apply unconstrained scale properties without defining strict transform origins, snapshots will drift from their visual anchors, resulting in disruptive optical jumps. Standardising scale transforms with normalised transform origins locks each element securely to its viewport orientation.

Configuring Strict Scaling Pairs in CSS

To configure asymmetric zoom-in and zoom-out transitions across view states, declare discrete keyframes with matching transform origins:

::view-transition-old(zoom-card) {
  animation: 320ms cubic-bezier(0.4, 0.0, 1.0, 1.0) both scaleDownOut;
  transform-origin: center center;
}

::view-transition-new(zoom-card) {
  animation: 320ms cubic-bezier(0.0, 0.0, 0.2, 1.0) both scaleUpIn;
  transform-origin: center center;
}

@keyframes scaleDownOut {
  from {
    transform: scale(1);
    opacity: 1;
  }
  to {
    transform: scale(0.92);
    opacity: 0;
  }
}

@keyframes scaleUpIn {
  from {
    transform: scale(1.08);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

Preserving Aspect Ratios with Object-View-Box

When transitioning between elements of different intrinsic dimensions, pair scaling transforms with CSS object-view-box or object-fit: cover to prevent temporary aspect-ratio warping:

::view-transition-old(zoom-card),
::view-transition-new(zoom-card) {
  object-fit: cover;
  overflow: clip;
}

Validating Composited Renders in DevTools

Open Chrome DevTools, navigate to Rendering, and enable Layer Borders. Verify that during snapshot transitions, only the isolated compositor layers perform transform mutations, guaranteeing constant 60fps or 120fps refresh rates on modern high-refresh displays.