动效设计 是做什么的？
动效解释变化并确认输入。如果两者都不满足，那它只是装饰，需要给出理由。
1. 是否应该添加动画？
| 用户看到它的频率 | 决策 |
|---|---|
| 每天 100+ 次（快捷键、调色板切换、打字） | 从不做动画 |
| 数十次（悬停、列表导航、标签页） | 微小动画或不做（颜色/透明度，低于 150ms） |
| 偶尔（模态框、抽屉、提示条、下拉菜单） | 标准过渡 |
| 很少（引导、成功提示、首屏英雄区） | 可以加入愉悦感 |
键盘触发的动作永远不要做动画。
2. 缓动曲线
- 进入或退出：强 ease-out
cubic-bezier(.23, 1, .32, 1)。 - 在屏幕上移动：ease-in-out
cubic-bezier(.77, 0, .175, 1)。 - 抽屉/面板：
cubic-bezier(.32, .72, 0, 1)。 - 颜色/悬停：
ease。持续运动（跑马灯、进度条）：linear。 - UI 中永远不要用
ease-in；用户在观看的那一刻会感觉卡顿。
3. 持续时间
按压 100-160ms · 工具提示 125-200ms · 下拉菜单 150-250ms · 模态框/抽屉 200-400ms · 营销英雄区最多 800ms。退出比进入快约 20%。UI 动效保持在 300ms 以内。
4. 工艺规则
- 只对
transform和opacity做动画。永远不要对width、height、top、left或transition: all做动画。 - 不要从
scale(0)出现；从scale(.95)+opacity: 0开始。 - 弹出框和菜单从其触发元素缩放（
transform-origin设置为触发元素）。模态框保持居中。 - 按钮：
:active { transform: scale(.97) }配合 120ms 过渡。 - 工具提示：第一个延迟约 400ms；相邻的工具提示立刻打开。
- 列表交错：每项间隔 30-50ms，总时长不超过 400ms。
- 滚动展示：每页最多一个，移动距离小（8-16px），只运行一次。不要在每个部分都加。
- 弹簧动效（Motion/Framer、React Spring）用于拖拽、手势和可中断的运动：
{ type: "spring", duration: .4, bounce: .15 }。反弹保持在 0.1-0.3 之间，只用于趣味性交互表面。 - 优先使用 CSS 过渡和
@starting-style处理简单的进入/退出；页面/状态变形使用 View Transitions API；只有需要手势或序列时才使用 JS 库。
5. 减弱动效（必选）
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
}
保留透明度变化和状态颜色；移除移动、视差和抖动效果。
审查格式
审查动效代码时，用表格回答：| 之前 | 之后 | 原因 |，每个问题一行。