动效
| 令牌 | 取值 |
|---|---|
motion.fast | 150ms |
motion.base | 200ms |
motion.easing | cubic-bezier(0.2, 0, 0.38, 1) |
动效确认某事发生了变化。它从不承载含义，也从不让用户等待。
1交互反馈——hover、按下、切换、边框变色：
fast。2内容过渡——侧栏收起、对话框进出：
base。3只动
opacity、transform 与颜色——绝不动布局属性。GPU 正忙着渲染你的预览，动 height 或 width 会掉帧。4没有东西超过
base。没有回弹、没有过冲、没有停留。5生成进度不是动画，是数字和阶段名。
6加载时没有入场动画。
7
prefers-reduced-motion: reduce 把所有时长归零。什么都不会丢，因为没有状态只靠动效传达。属性卡片收起只改 hidden 和箭头的 transform，没有高度动画。分段控件切换只是底色和阴影的 150ms 过渡。本页这些演示块里的每一次状态变化，用的都是上面这三个取值。