Icon Morph

A menu button and a close button are made of the same parts. A crossfade throws that away. It dissolves one picture and prints another, and in the middle you see both at half strength. That frame is a smear rather than a shape, so the swap reads as a glitch.

If two icons share their parts, move the parts. Crossfade only when they share nothing.

On the right, the outer bars slide in and rotate into the cross. The middle one fades, because three into two means one has to go. You can follow any single bar the whole way, which is what makes it read as one object changing instead of two pictures swapping.

Two details do most of the work. The fade runs at half the length of the movement, so the middle bar is gone before the others finish rotating. And the curve is ease-in-out, one of the few places it is right, because the bars start and stop on screen and both ends want softening.

Sometimes it is one rotation

A plus and a cross are the same two strokes at different angles. There is nothing to morph and nothing to fade. Turn the whole thing 45 degrees and you are done.

The same applies to a chevron in an accordion or a dropdown. It is one icon turned over, not two icons. Rotating it also tells you which way the panel went, which a crossfade cannot do.

When the crossfade is right

A sun and a moon share nothing. No stroke in one becomes a stroke in the other, so there is no path between them to animate. Spinning and scaling them past each other looks like effort, but it is movement with no meaning behind it, and it takes longer than just swapping.

So the question is not which easing or how long. It is whether the two states share any parts at all. A hamburger and a cross do. A plus and a cross are the same icon twice. A sun and a moon are genuinely two pictures, and there a crossfade is the correct answer.