Morphing Icon
图标变形
Aliases:图标变形汉堡变叉图标切换动画菜单变关闭图标过渡
What is it
One icon smoothly morphs between two states instead of being swapped — classically the hamburger turning into a close X. Built from the same strokes rotating, translating and fading, it says "same control, new state".
Interactive playground
Try it. Make an informed choice.Loading demo…
✓ When to use
- Paired states — menu/close, play/pause
- Toggle-type icon buttons in a fixed spot
- Emphasising a state change without moving layout
✕ When not to use
- Semantically unrelated icons — morphing misleads
- Shapes too different — the in-between looks broken
- Tiny icons under 16px — the morph is illegible
Variants
Hamburger to X
汉堡变叉
Middle line fades out, outer lines rotate to cross
Plus to X
加号变叉
A 45° rotation of the whole icon — the easiest morph
Play to pause
播放变暂停
Triangle and double bars morph into each other
Implementation
transform: rotate + translatetransition 300msopacity: middle lineThree spans (or SVG lines) with transition transform 300ms. Hamburger to X — top line translateY(6px) rotate(45°), bottom translateY(-6px) rotate(-45°), middle opacity 0. The aria-label must switch with the state; respect prefers-reduced-motion by swapping the glyph directly.
Agent prompts
Four prompt layers run from “what it is” all the way to a ready-to-run task. On the Agent task layer you can stack a visual style and extra requirements, then copy it to your coding agent in one click.
Implement a hamburger-to-X morph for the project's nav toggle. Check the existing icon system (SVG or iconfont) first and pick a feasible layer. Requirements: - rotate/translate/opacity transitions on the same strokes, 300ms - aria-label switches with state; keyboard operable - Fixed icon footprint, no layout shift - Respect prefers-reduced-motion - No new dependencies Run existing checks when done and list modified files. Additional requirements: - Dark mode support - Respect prefers-reduced-motion - No new dependencies - Run existing checks and list modified files
Hand to your coding agent — stack a style and extra requirements on top
Related concepts
A clickable block that triggers one clear action — the most basic interactive element of any interface. Fill, outline and ghost styles rank primary against secondary actions; presses give instant sink-in feedback, and a busy state disables further clicks to prevent double submission.
ComponentsApplies toA temporary overlay listing actions, opened by click or right-click: flat or grouped command items that execute and close on selection. It houses infrequent actions (more, settings, delete), usually behind a "⋯" button or a context click.
ComponentsApplies toA panel that slides in from a screen edge (usually right or left), usually with a backdrop. Lighter than a modal: it carries longer content without leaving the page, and closing restores the original context. On mobile it appears as a nav drawer or a bottom sheet.
ComponentsApplies toWhen users press a clickable element it scales down slightly (typically 0.95–0.98) and springs back on release. A few tens of milliseconds that make a UI feel like physical buttons instead of flat web pages.
MotionSimilar