How to Configure Strict CSS View-Transition-Old and New Clip-Path Insets in Google Chrome

Framed box reveals—where a new view emerges from an expanding rectangular boundary with optional rounded corners—provide polished, app-like transitions across document navigations. With Google Chrome’s native View Transition API, applying animated clip-path: inset(...) rules directly to ::view-transition-old and ::view-transition-new delivers smooth, hardware-accelerated rectangular reveals without modifying underlying DOM tree nodes.

Inset Geometry in Chromium View Transitions

The CSS inset(top right bottom left round border-radius) syntax allows web authors to crop snapshot textures dynamically. When coordinating transition pairs, ensuring matched border-radius curves prevents edge snapping and maintains visual fluidity.

Authoring Strict Inset Box Keyframes

Configure complementary rectangular inset keyframes in your stylesheet:

::view-transition-old(inset-frame) {
  animation: 350ms cubic-bezier(0.4, 0.0, 0.2, 1.0) both insetBoxOut;
}

::view-transition-new(inset-frame) {
  animation: 350ms cubic-bezier(0.4, 0.0, 0.2, 1.0) both insetBoxIn;
}

@keyframes insetBoxOut {
  from {
    clip-path: inset(0% 0% 0% 0% round 0px);
    opacity: 1;
  }
  to {
    clip-path: inset(25% 25% 25% 25% round 24px);
    opacity: 0.2;
  }
}

@keyframes insetBoxIn {
  from {
    clip-path: inset(25% 25% 25% 25% round 24px);
    opacity: 0.2;
  }
  to {
    clip-path: inset(0% 0% 0% 0% round 0px);
    opacity: 1;
  }
}

Handling Asymmetric Card Anchors

When transitioning from a compact UI card into a fullscreen view, customize top, right, bottom, and left inset dimensions to anchor precisely to the originating card’s initial viewport coordinates.

Auditing in Chrome DevTools

Open Chrome DevTools > Rendering panel and enable Paint flashing. Verify that only the isolated compositor layer updates during inset clipping, maintaining silky 60fps or 120fps refresh rates.