Mask Imperfect Crossfades with Blur
SHOULD: When a crossfade still reads as a ghosted double exposure, add a small transition-scoped `filter: blur(2px)` (2–4px, single element, only for the duration of the transition, always < 20px) so the two states fuse into one morph. This is the narrow carve-out from "never animate blur", which targets large, long-lived, or continuously-animating blurs — stay especially conservative in Safari.
Add a small blur to a crossfade so two overlapping states read as one transformation, not a double image
Bad
Good
Why it matters
In a straight opacity crossfade both layers sit near 50% at the midpoint and stay separately legible, so the user perceives a ghosted double exposure rather than a change. A 2px blur on the outgoing layer destroys its legibility exactly where the overlap happens, and the eye fuses the two into a single morph. Note the tension with the blanket "never animate blur" performance rule: that rule targets large, long-lived, or continuously-animating blurs, which force expensive re-rasterization.
A small (2–4px), short, transition-scoped blur on a single element is the deliberate carve-out — stay well under 20px, and be especially conservative in Safari.