反馈与交互 · 点一下的回应
抖动Shake
- 出错
- 警示
- 短促
元素左右快速抖动几下，明确告诉用户这里出错了、输入不被接受。
什么时候用它
表单校验失败或操作被拒绝时用它；抖动幅度要小、来回 2–3 次，否则会显得暴躁。
参数
transform: translateX ±6px · 3 cycles · total 300ms · ease-in-out · each cycle 100ms
配方
每一项 cycle 100ms3 个来回每个来回 100ms抖动 → transform: translateX ±6px · 3 cycles · total 300ms · ease-in-out
给 AI 的一句话
给这个输入框加校验失败的抖动：左右各偏移 6px、来回 3 次、共 300ms、ease-in-out，抖完回到原位。