动画 · 反馈 · 07
错误抖动
错误抖动 = 输入框在被拒绝时左右急震，让错误不仅被看到，更被感觉到。
直达修改 Prompt →
尊重 prefers-reduced-motion：动画关闭，仅保留终态。
错误抖动是什么？
抖动是全世界的「不行」。表单拒绝输入时，字段左右震几下，让错误被感觉到而不只是被标注。控制在 0.4s、几像素内——大幅抖动像在发火。务必配合可见的错误文案，单靠动效不无障碍。
动画 标本
- 触发
- click
- 技术
- css
- 时长
- 1.6s
- 缓动
ease-in-out- 性能
- transform
什么时候用
- Invalid password, wrong code, failed submit
- Any field that must reject input visibly
什么时候别用
- On every keystroke — it punishes typing
- Without a text error — motion alone fails accessibility
Shake once per error event, not per keystroke, or it feels like the field is fighting the user.
Add a shake to an invalid field: translateX +/-5px three times over 0.4s ease-out, transform only, plays once per submit error.