元素原地变形动画（开关/折叠面板/复选框/按钮状态）缺少质感…

当 UI 元素在不进入/退出的情况下原地变形（toggle 开关、折叠面板、复选框、按钮状态等）时，为其设计有质感、可逆、时长合理的状态变化动画。

适用场景

解决思路

1. Squash & Stretch：元素展开前先压缩，例如 toggle 开关在滑动前先压缩 5%。
2. Anticipation：变化前做预备反向动作，例如展开前先向反方向移动 2-3px。
3. Staging：让变形保持在用户焦点中心，状态变化不要分散交互点的注意力。
4. Straight Ahead vs Pose-to-Pose：明确定义每一个精确状态——按钮要有 rest、hover、active、disabled，每个状态都精确设计。
5. Follow Through & Overlapping：让各部分以不同速率变换，例如图标先旋转，label 随后淡入。
6. Slow In/Slow Out：双向变化使用 ease-in-out，即 cubic-bezier(0.4, 0, 0.2, 1)。
7. Arcs：旋转元素沿自然弧线运动，例如 chevron 绕自身中心点旋转，而不是线性位移。
8. Secondary Action：给主变化配一个辅助运动，例如 toggle 滑动 + 颜色变化 + 图标切换。
9. Timing 分档：micro-states 用 100-150ms（checkbox tick、radio fill）；标准状态用 150-250ms（toggle、accordion）；复杂状态用 250-400ms（多部件变换）。
10. Exaggeration：状态变化时略微过冲，例如 toggle 越过 2px 后再回稳。
11. Solid Drawing：变换过程中保持元素完整性，不要出现破坏视觉一致性的变形。
12. Appeal：状态变化要让人感到满足，用户是带着意图点击的，要奖励这份意图。
13. Checkbox：150ms、ease-out，tick 画入。
14. Toggle Switch：200ms、ease-in-out，略微过冲。
15. Radio Button：150ms、ease-out，从中心 scale in。
16. Accordion：250ms、ease-in-out，同时做 height 和 rotation。
17. Tab Switch：200ms、ease-in-out，indicator 滑动。
18. Button Active：100ms、ease-out，scale 到 0.97。
19. Card Expand：300ms、ease-in-out，所有属性一起变化。
20. Toggle 实现模式：`.toggle { transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); }`，`.toggle-knob { transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1); }`（实现过冲），`.toggle.active .toggle-knob { transform: translateX(20px); }`。
21. Accordion 实现模式：`.accordion-content { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 250ms ease-in-out; }`，`.accordion.open .accordion-content { grid-template-rows: 1fr; }`。
22. 关键规则：状态变化是可逆的，到状态 B 的动画应该是到状态 A 动画的逆，两个方向都要测试。

适用边界 · 注意事项

• 元素进入/退出场景（需要入场、离场动画）不适用，本技能只处理不离开原位的变形。
• 与状态变化无关的长时间装饰性动画或整页级过渡不适用。