How to Configure Strict CSS View-Transition-Old and New Mask-Image Gradients in Google Chrome

Luminance-based gradient wipes—where an incoming document state dissolves smoothly across an alpha gradient boundary—deliver subtle, sophisticated transitions superior to standard uniform opacity cross-fades. With Chromium’s View Transition API, applying animated mask-image: linear-gradient(...) rules directly to ::view-transition-old and ::view-transition-new unlocks hardware-accelerated alpha-channel dissolves without mutating underlying DOM trees.

Gradient Mask Mechanics in Chromium

Chromium isolates the pseudo-element snapshot in a dedicated GPU texture layer. Applying mask-image or -webkit-mask-image instructs the GPU rasterizer to multiply snapshot alpha values by the gradient alpha ramp. By shifting the mask-position or gradient color stops dynamically, web authors can craft directional gradient wipes that reveal incoming content with photographic softness.

Authoring Strict Mask Gradient Keyframes

Configure complementary linear-gradient mask animations in your stylesheet:

::view-transition-old(gradient-wipe) {
  animation: 380ms cubic-bezier(0.4, 0.0, 0.2, 1.0) both maskFadeOut;
  -webkit-mask-image: linear-gradient(to right, black 0%, black 50%, transparent 100%);
  mask-image: linear-gradient(to right, black 0%, black 50%, transparent 100%);
  -webkit-mask-size: 200% 100%;
  mask-size: 200% 100%;
}

::view-transition-new(gradient-wipe) {
  animation: 380ms cubic-bezier(0.4, 0.0, 0.2, 1.0) both maskFadeIn;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 50%, black 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 50%, black 100%);
  -webkit-mask-size: 200% 100%;
  mask-size: 200% 100%;
}

@keyframes maskFadeOut {
  from {
    -webkit-mask-position: 0% 0%;
    mask-position: 0% 0%;
    opacity: 1;
  }
  to {
    -webkit-mask-position: 100% 0%;
    mask-position: 100% 0%;
    opacity: 0.1;
  }
}

@keyframes maskFadeIn {
  from {
    -webkit-mask-position: -100% 0%;
    mask-position: -100% 0%;
    opacity: 0.1;
  }
  to {
    -webkit-mask-position: 0% 0%;
    mask-position: 0% 0%;
    opacity: 1;
  }
}

Compositor Memory and Hardware Acceleration

Ensure that high-resolution viewports do not experience texture memory bloat by applying will-change: mask-position only during the active transition window.

Auditing in Chrome DevTools

Open Chrome DevTools > Rendering drawer and confirm that compositor frames maintain steady 60fps/120fps refresh rates without dropped v-sync cycles.