Crossfade
A transition where one element fades out as another fades in, the two briefly overlapping in opacity.
Inbox
Sent
Crossfades are the gentlest transition. They imply equivalence — the new state replaces the old without direction, hierarchy, or motion. Useful for tab switches, image carousels, and any lateral move where push or slide would feel too forceful. Short durations (150-250ms) keep them from feeling sluggish.
Also called
fade transitiondissolve
When to use
- Lateral transitions between peer views (tabs, carousels)
- Theme or color-mode switches
- Loading-state to loaded-state where you want a soft transition
When not to use
- Hierarchical navigation (use push or modal)
- Transitions where preserving an element's identity matters (use shared element or container transform)
Related
Source
Cinematic vernacular; standard in animation toolkits and CSS via opacity transitions.