Fade

A fade changes one number. The element stays exactly where it is, at exactly its size, and only its opacity travels between zero and one, which is why a fade makes no claim about space: it does not say the panel came from the button, or that the next screen is to the right, or that anything is above anything else. It is the transition to reach for when there is nothing spatial to say, and the one to avoid when there is.

That neutrality is also why it is cheap. Opacity is one of the two properties a browser can animate without touching layout or paint, so a fade is close to free on any hardware, and it degrades to nothing worse than a cut. Compare a crossfade, which is two fades sharing one span and needs both elements out of the flow so they can overlap at the midpoint. A single fade has no partner and no overlap. The related sequence, fading out, holding on the background, then fading in, is a third thing again (Material calls it fade through), and it reads as two events rather than one because the eye passes through the empty state between them.

Two details separate a fade that works from one that flickers. Space first: a fading element must already own the room it will occupy, because nothing about opacity reserves it. Animate opacity while the element is also joining the flow and everything below it jumps at the moment the fade starts, which reads as breakage rather than as arrival. Pointer events second: an element parked at zero opacity is still there and still clickable, so pair the opacity with visibility or display: none at the ends of the transition, and let the discrete property flip while the continuous one carries the look.

Asymmetric timing is the last piece of craft. Arrival usually wants longer than departure, since a reader needs to notice something appear but does not need to watch it leave, and a fade out that lingers reads as an interface that cannot make up its mind. A fade is also the standard substitute when movement is not wanted: interfaces honouring a stated preference for reduced motion commonly keep the fade and drop the translation, which makes this the one transition that rarely has to be removed.