How to Configure Strict CSS View-Transition-Old and New Filter Grayscale Shifts in Google Chrome

Monochromatic desaturation transitions—such as fading a vibrant media gallery into an understated archive view or shifting into an out-of-stock interface state—provide subtle, non-jarring visual feedback during document navigations. With Google Chrome’s native View Transition API, applying animated filter: grayscale(...) rules directly to ::view-transition-old and ::view-transition-new unlocks hardware-accelerated desaturation without mutating underlying DOM nodes.

Chromium View Transition Grayscale Mechanics

Chromium calculates grayscale conversions in the GPU compositor by projecting linear RGB values onto the standard Rec. 709 luminance weights (Y = 0.2126R + 0.7152G + 0.0722B). Coordinating complementary grayscale transitions between outgoing and incoming pseudo-elements ensures that color fades smoothly to gray without visual clipping or flickering.

Authoring Strict Grayscale Keyframes

Configure complementary desaturation keyframes in your stylesheet:

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

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

@keyframes grayscaleOut {
  from {
    filter: grayscale(0);
    opacity: 1;
  }
  to {
    filter: grayscale(1);
    opacity: 0.2;
  }
}

@keyframes grayscaleIn {
  from {
    filter: grayscale(1);
    opacity: 0.2;
  }
  to {
    filter: grayscale(0);
    opacity: 1;
  }
}

Tone Preservation in High Dynamic Range

When applying grayscale filters across HDR assets, declare color-interpolation: linearRGB on the transition root to preserve highlight details and shadow gradients without clipping.

Auditing in Chrome DevTools

Open Chrome DevTools > Rendering drawer and check Paint flashing. Verify that Chromium executes grayscale animations entirely on the GPU compositor thread without triggering layout reflows or CPU-bound raster passes.