How to Configure Strict CSS View-Transition-Old and New Filter Invert Duotone Inversions in Google Chrome

Modern creative editorial portfolios, brand identity showcases, and darkroom simulation suites frequently implement duotone negative states where image luminance is reversed and tinted across dual brand accent tones. With Google Chrome’s native View Transition API, applying animated filter: invert(1) sepia(1) hue-rotate(...) rules directly to ::view-transition-old and ::view-transition-new unlocks hardware-accelerated duotone negative transitions without mutating underlying DOM nodes.

Chromium View Transition Duotone Inversion Mechanics

Chromium calculates duotone inversion in the GPU compositor by sequentially chaining color inversion, sepia tone re-weighting, and chromatic hue matrix rotations. Chaining these filters in hardware allows snapshots to transition smoothly from full-color reality into stylized two-tone darkroom negatives.

Authoring Strict Duotone Inversion Keyframes

Configure complementary negative exposure keyframes in your stylesheet:

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

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

@keyframes duotoneOut {
  from {
    filter: invert(0) sepia(0) hue-rotate(0deg);
    opacity: 1;
  }
  to {
    filter: invert(1) sepia(0.8) hue-rotate(210deg);
    opacity: 0.2;
  }
}

@keyframes duotoneIn {
  from {
    filter: invert(1) sepia(0.8) hue-rotate(210deg);
    opacity: 0.2;
  }
  to {
    filter: invert(0) sepia(0) hue-rotate(0deg);
    opacity: 1;
  }
}

Preserving Contrast and Highlights

Combine duotone filters with filter: contrast(1.1) to preserve delicate typographic counters and highlight separation across bright viewport backgrounds.

Auditing in Chrome DevTools

Open Chrome DevTools > Rendering drawer and check Frame Rendering Stats. Confirm that Chromium executes duotone inversion entirely on the GPU compositor thread without triggering CPU rasterisation.