动画 · 形变与变换 · 14
图标形变
图标形变 = 一个图标平滑变成另一个（加号变对勾、菜单变关闭），在不替换元素的前提下提示状态变化。
直达修改 Prompt →
尊重 prefers-reduced-motion：动画关闭，仅保留终态。
图标形变是什么？
图标形变把状态变化变成一段流畅手势——加号变对勾、菜单变关闭。不是替换两个元素，而是形状交叉淡入旋转，眼睛读到连续而非切割。两个状态要视觉相关，否则形变像故障。
动画 标本
- 触发
- hover
- 技术
- css
- 时长
- 2s
- 缓动
ease-in-out- 性能
- transform, opacity
什么时候用
- Add-to-done, menu-to-close, play-to-pause
- Any toggle where the icon is the status
什么时候别用
- Two unrelated shapes — the morph reads as a glitch
- Without a text/aria label for the state
Keep the two shapes related (plus/check, menu/close) or the morph looks like a bug.
Morph one icon into another: cross-fade + rotate (0.4s) between state A and B, transform and opacity only, on state change.