动画 · 反馈 · 08
成功对勾
成功对勾 = 操作完成时对勾自行描绘，把「完成」变成一个被确认的微小瞬间。
直达修改 Prompt →
尊重 prefers-reduced-motion：动画关闭，仅保留终态。
成功对勾是什么？
自行描绘的成功对勾让人觉得是「挣来」的，而非硬塞。描边沿路径扫过，用户看着任务收尾。用 stroke-dashoffset 驱动，成功时播放一次——循环对勾像还在加载。
动画 标本
- 触发
- click
- 技术
- css
- 时长
- 1.8s
- 缓动
ease-in-out- 性能
- stroke-dashoffset
什么时候用
- Form submitted, payment done, file saved
- Any 'completed' confirmation
什么时候别用
- Looping on a static success screen — it reads as still loading
- Without a text label — motion is not the status
One draw per success. Looping a check makes users think the action has not finished.
Draw a success check on completion: animate stroke-dashoffset from full to 0 over 1.8s ease-out, plays once.