Polish & Effects · Small finishing touches
Icon morph图标形变
- one thing changing
- strokes travel
- no swap
A single icon morphs directly between two states: hamburger to cross, play to pause, plus to minus. It is not two icons trading visibility — the strokes genuinely travel, rotate and stretch, so what the viewer sees is one thing changing rather than one thing replacing another.
When to use it
Use it for two-state toggles — open/close, play/pause, expand/collapse — especially on the toggle control itself. Do not morph between two unrelated shapes: the middle of that transition turns into spaghetti, and a crossfade reads better.
Parameters
transform: rotate 0→45deg translateY ±7px · opacity 1→0 middle stroke · 240ms cubic-bezier(0.4, 0, 0.2, 1)
Recipe
Icon morph → transform: rotate 0→45deg translateY ±7px · opacity 1→0 middle stroke · 240ms cubic-bezier(0.4, 0, 0.2, 1)
One sentence for your AI
Morph a hamburger into a cross: the top and bottom strokes each rotate to ±45deg while translating to the centre line (±7px each), and the middle stroke fades from 1 to 0 while shortening slightly. Run the whole thing over 240ms with cubic-bezier(0.4, 0, 0.2, 1). All three strokes must share one duration — separate timings give it away as one line changing first and the others catching up.