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

Modern interactive digital media platforms, photography portfolios, and scanning tools frequently incorporate negative-film and color-inversion transitions to create striking visual shifts. When switching between photographic negative previews and positive developed images, applying an animated filter: invert(...) directly to the View Transition pseudo-elements provides an intuitive visual representation of photographic development. With the View Transition API in Chromium, developers can apply filter: invert() directly to ::view-transition-old and ::view-transition-new without mutating DOM elements or re-rendering source images.

Configuring strict invert filter rules in Google Chrome ensures smooth, hardware-accelerated color inversions across view transitions.

Chromium View Transition Invert Mechanics

Chromium isolates the snapshot layers within the pseudo-element image pair:

::view-transition
 └─ ::view-transition-group(negative-scan)
     └─ ::view-transition-image-pair(negative-scan)
         ├─ ::view-transition-old(negative-scan)
         └─ ::view-transition-new(negative-scan)

By declaring custom CSS keyframes that interpolate filter: invert(), authors can achieve smooth film-negative transitions:

/* Film Negative to Positive Transition */
::view-transition-old(negative-scan) {
    animation: 400ms cubic-bezier(0.4, 0, 0.2, 1) both film-fade-out;
}

::view-transition-new(negative-scan) {
    animation: 400ms cubic-bezier(0.16, 1, 0.3, 1) both film-develop-in;
}

@keyframes film-fade-out {
    0% {
        filter: invert(100%);
        opacity: 1;
    }
    100% {
        filter: invert(50%);
        opacity: 0;
    }
}

@keyframes film-develop-in {
    0% {
        filter: invert(50%);
        opacity: 0;
    }
    100% {
        filter: invert(0%);
        opacity: 1;
    }
}

Preserving Pure White and Black Boundaries

When inverting high-contrast typography, combine filter: invert() with subtle contrast() adjustments to prevent grey fringing:

::view-transition-new(high-contrast-view) {
    animation: 350ms ease both crisp-invert;
}

@keyframes crisp-invert {
    from {
        filter: invert(100%) contrast(110%);
        opacity: 0;
    }
    to {
        filter: invert(0%) contrast(100%);
        opacity: 1;
    }
}

Inspecting Invert Transitions in Chrome DevTools

To audit filter rendering during transitions in Google Chrome:

1. Open DevTools (F12) and bring up the Animations drawer via Ctrl+Shift+P > Show Animations.
2. Trigger the negative development transition to capture the timeline tracks.
3. Scrub the timeline to 50% completion to freeze the intermediate inversion state.
4. Select ::view-transition-new(negative-scan) in the Elements panel.
5. In the Computed panel, verify that filter: invert(...) computes properly and confirm that the GPU compositor renders the colour inversion smoothly without dropped frames.

Configuring strict invert filters produces striking, publication-grade photographic visual transitions across Google Chrome.