Crossfade (dissolve)
Two elements overlap while one fades out and the other fades in, so the swap reads as a blend instead of a cut.
See it
What it is
A crossfade overlaps two elements in the same spot: the outgoing one drops to opacity 0 while the incoming one climbs to 1, over the same window. The word comes from film editing, where the dissolve has meant 'time passed, or these two things are related' since the silent era. On the web it needs the two layers stacked (grid area or absolute positioning), because a normal swap would reflow.
Use it for image carousels, tab panels of similar size, theme swaps, and hero backgrounds: places where the content changes but the frame does not. It is also the default the View Transitions API gives you for free, which is why untouched view transitions all feel the same. Around 250ms to 400ms is the sweet spot; slower and it reads as a lazy slideshow.
Gotcha: linear opacity on both layers dips in the middle. At the halfway mark both sit at 50 percent, so whatever is behind them shows through and you get a pale flash, or a ghosted double image where the two overlap. Putting an opaque background inside the incoming layer does not save you, because that background is fading along with everything else in it. Three fixes that actually work: park a separate opaque backing behind both layers, hold the outgoing layer at full opacity until the incoming one has reached 1, or isolate the stack and give the fading layers 'mix-blend-mode: plus-lighter' so their weighted colors add back up to a full image at every point in the fade.
Ask AI for it
Crossfade between these two states: stack both elements in the same grid cell so they occupy identical space, and put 'isolation: isolate' on the wrapper so the blending stays contained. Cross-animate opacity over 300ms, outgoing from 1 to 0 and incoming from 0 to 1, and set 'mix-blend-mode: plus-lighter' on the fading layers so their weighted colors stay fully composited and there is no pale dip at the midpoint. Keep the outgoing layer at pointer-events: none and remove it once the transition ends.