- AI 给所有动画写了同一个数（300ms、500ms、0.6s）。
- 按钮按下去“软”“黏”，或者连点后数字在慢慢追。
- 弹窗、抽屉关掉时还要看它慢慢退场。
动效 · 节奏与反馈
动效时长Motion Duration
按物件的移动距离和重要性给每类动效定时长，让结果立即到位、动画不排队，减少动效时只去掉运动。
先连点加购，看时长怎样拖住结果
默认是很多 AI 代码里常见的“统一 600ms + 等动画演完再改数字”。先照任务连点 3 次，再一个个改设置对照。
加购时长实验台
一个滑块同时控制三件事：按钮按下、购物车角标 +1、右侧“已加入”抽屉。每个物件旁边的标签按它自己的推荐区间实时判断「太快 / 合适 / 拖沓」。
角标 +1 · 600ms拖沓推荐 150–300
帆布托特包¥129 · 米白按钮按下 · 600ms拖沓推荐 80–200
“已加入”抽屉会从右侧滑进这一块 ←抽屉滑入 · 600ms拖沓推荐 200–350 · 离开 600ms
已点 0 次角标显示 0还没点
任务：保持统一 600ms，快速连点 3 次「加入购物车」，看角标数字和抽屉跟不跟得上。
从刚才的操作里提炼
- 不同物件，不同时长。统一 600ms 三个标签全是「拖沓」；调到 150ms，按钮和角标合适了，抽屉却「太快看不见」；调到 250ms，抽屉合适了，按钮又拖沓。「各用推荐值」让三个标签同时变成合适——没有一个全局正确时长。
- 太短看不见，太长像卡。0ms 只是瞬切，用户不知道发生了什么；拖过推荐区间，按钮按下去软绵绵的，像网卡了。
- 结果不能等动画。「排队等动画演完」时，长时长让角标落后好几次，用户会以为没点上再点。正确做法是数字立即到位，动画只负责润色、可被下一次点击打断。
- 离开比进入快一点。抽屉进入 260ms、离开 200ms；统一时长下关抽屉也要等同样久。
- 减少动效保留结果。勾上后运动全部取消，但角标数字和抽屉件数立即正确。
什么时候要盯时长
不是每个动画都要调时长，出现下面这些信号时再盯。
- 接口本身慢：要做加载态，不是把动画拉长去“掩盖”。
- 动画突兀：多半是缓动曲线或位移距离问题，先看 easing。
- 用户本就不想看动画：交给减少动效，而不是只缩短。
怎么用：给 AI 一张时长表，再按表验收
别说“慢一点显得高级”，而是按物件给区间。下面这张表可以直接贴给 AI。
| 物件 | 时长 | 为什么 |
|---|---|---|
| 按下、悬停、勾选 | 100–150ms | 手指刚离开就该看到，长了像没按上 |
| 开关、Tab、角标数字 | 150–200ms | 小范围状态变化，够看清就停 |
| 抽屉、弹窗、下拉进入 | 200–300ms | 移动距离更远，给眼睛追踪的时间 |
| 同类元素离开 | 比进入短约 1/4 | 用户已决定关掉，别让他等退场 |
| 页面转场、大面积变化 | ≤400ms，封顶 500ms | 超过 500ms 用户就是在等动画 |
- 跟 AI 说：“按这张表给每类动效设时长；结果（数字、文字、选中态）立即更新，动画可被下一次操作打断，不排队；尊重 prefers-reduced-motion。”
- 看报告：AI 的 diff 里会出现
transition-duration、duration: 0.6这类数字。逐个对表，看到同一个数刷满全站就要追问。 - 上手验收：在手机上快速连点三次，数字是否每次都立刻对；开关抽屉各一次，离开是否不拖；打开系统“减少动态效果”，结果是否仍完整。
正反例：同一个加购，只改时长策略
按下 600 · 角标 600 · 抽屉 600/600按钮像没按上，连点三次角标还在追第一次；用户以为卡了，又点一次，结果加购了四件。
按下 120 · 角标 220 · 抽屉 260/200每次点击立刻有反馈、数字立刻对，抽屉出来看得清、关掉不拖；减动效时同样的结果瞬间到位。
快速自测
设置页里有一个“消息通知”开关，AI 给开关滑块写了 500ms 的动画，并在动画结束后才保存设置。你应该怎么要求？
继续查证
术语的技术定义和行为以这些一手或权威资料为准。
下一步学
和本知识点经常一起出现的概念。