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

Widescreen displays and ultrawide cinematic viewports often require anamorphic or elliptical transition shapes rather than perfect circles to match display aspect ratios. With Chromium’s View Transition API, applying animated clip-path: ellipse(...) rules directly to ::view-transition-old and ::view-transition-new delivers smooth, hardware-accelerated elliptical reveals tailored for modern display form factors.

Elliptical Mask Geometry in Chromium View Transitions

Chromium calculates clip-path ellipse coordinates using dual radii: horizontal radius $r_x$ and vertical radius $r_y$. Configuring the radius ratio to match a 16:9 or 21:9 viewport proportion prevents snapshot distortion and avoids clipping corner artifacts during document navigation.

Authoring Strict Elliptical Iris Keyframes

Configure complementary elliptical reveal keyframes in your stylesheet:

::view-transition-old(ellipse-reveal) {
  animation: 360ms cubic-bezier(0.4, 0.0, 0.2, 1.0) both ellipseOut;
}

::view-transition-new(ellipse-reveal) {
  animation: 360ms cubic-bezier(0.4, 0.0, 0.2, 1.0) both ellipseIn;
}

@keyframes ellipseOut {
  from {
    clip-path: ellipse(150% 100% at 50% 50%);
    opacity: 1;
  }
  to {
    clip-path: ellipse(0% 0% at 50% 50%);
    opacity: 0.2;
  }
}

@keyframes ellipseIn {
  from {
    clip-path: ellipse(0% 0% at 50% 50%);
    opacity: 0.2;
  }
  to {
    clip-path: ellipse(150% 100% at 50% 50%);
    opacity: 1;
  }
}

Viewport Aspect-Ratio Adaptation

Leverage CSS variables to adapt the elliptical horizontal and vertical radii dynamically according to active viewport queries:

@media (min-aspect-ratio: 16/9) {
  :root {
    --vt-rx: 160%;
    --vt-ry: 90%;
  }
}

Auditing in Chrome DevTools

Open Chrome DevTools > Animations drawer and verify that the elliptical mask interpolates cleanly across all aspect ratios without triggering layout thrashing.