Morph
One shape continuously bending into another instead of swapping: the hamburger lines folding into an X.
See it
What it is
A morph animates the geometry itself. Instead of fading icon A out and icon B in, the outline of A bends, stretches, and lands as B. The canonical examples are the hamburger menu whose three lines rotate into an X, the play triangle collapsing into a pause bar, and a search magnifier unfolding into a close button.
Two very different techniques hide behind the same word. The cheap one is faking it with transforms: keep the shapes as separate elements (three stacked bars, two SVG rects) and rotate, translate, and scale them into the new arrangement. This is what most hamburger toggles actually do, it runs on the compositor, and it is the right call whenever the shapes decompose cleanly. The expensive one is true path interpolation, where you tween the 'd' attribute of an SVG path from one outline to another, usually with Flubber or GSAP's MorphSVGPlugin.
The gotcha that bites everyone: path interpolation only works when both paths have the same number of points in the same command order. Hand two arbitrary Illustrator exports to a naive tween and you get a scrambled mess, or nothing at all. Flubber and MorphSVG exist precisely to normalize point counts for you. Keep morphs short (200ms to 400ms), because a slow morph reads as a glitch rather than a transformation.
Ask AI for it
Build a menu button that morphs between a hamburger and an X. Use three absolutely positioned bars inside a fixed-size button, animate them with CSS transforms only (the top bar rotates 45deg and translates to center, the bottom rotates -45deg to center, the middle fades out and scales to 0 on the x axis), 250ms with a slight back ease, and set transform-origin to center. No layout properties, transform and opacity only. Toggle via an 'is-open' class, keep aria-expanded in sync, and drop to an instant state change under prefers-reduced-motion.