Modern photographic galleries, camera capture simulations, and flash reveals frequently require transient exposure blooms to convey rapid capture or sudden scene illumination. With Google Chrome’s native View Transition API, applying animated filter: brightness(...) rules directly to ::view-transition-old and ::view-transition-new ensures hardware-accelerated luminance flashes without mutating underlying DOM trees.
Chromium View Transition Brightness Mechanics
Chromium calculates brightness adjustments in the GPU compositor by scaling linear RGB texture values by an exposure multiplier. When transitioning between scene states, interpolating brightness from standard levels (1.0) through high exposure peaks (e.g. 2.5) before resolving to the incoming view delivers realistic camera-flash transitions without visual tearing.
Authoring Strict Brightness Flash Keyframes
Configure complementary exposure keyframes in your stylesheet:
::view-transition-old(camera-flash) {
animation: 320ms cubic-bezier(0.1, 0.9, 0.2, 1.0) both flashFadeOut;
}
::view-transition-new(camera-flash) {
animation: 320ms cubic-bezier(0.1, 0.9, 0.2, 1.0) both flashFadeIn;
}
@keyframes flashFadeOut {
0% {
filter: brightness(1);
opacity: 1;
}
40% {
filter: brightness(2.4);
opacity: 0.8;
}
100% {
filter: brightness(1.2);
opacity: 0;
}
}
@keyframes flashFadeIn {
0% {
filter: brightness(2.4);
opacity: 0;
}
60% {
filter: brightness(1.6);
opacity: 0.8;
}
100% {
filter: brightness(1);
opacity: 1;
}
}Tone Mapping in Wide Gamut Displays
When applying extreme brightness multipliers across Display P3 and Rec. 2020 displays, declare color-interpolation: linearRGB across the active selectors to prevent highlight clipping.
Auditing in Chrome DevTools
Open Chrome DevTools > Rendering drawer and check Paint flashing. Confirm that Chromium executes brightness flashes entirely on the GPU compositor thread without triggering CPU rasterisation.