用 JavaScript 监听 click/touchstart 动态添加 shake class，配合 200ms 内、3–5 帧的 transform 位移动画（如 translateX(-0.1rem)），适配高 PPI 屏幕并降级 prefers-reduced-motion，绑定错误态同步触发且防重复。
用 animation 实现点击震动，别碰 :active 伪类
移动端点击震动不是靠 :active 拉伸或变色凑数，它得有明确的位移+时间节奏。CSS 的 :active 生命周期太短、不可控，且在部分 iOS Safari 上会跳过（尤其配合 touch-action: manipulation 时），直接导致震动“没感觉”。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用 JavaScript 监听
click或touchstart，给目标元素动态添加一个带animation的 class - 动画定义用
@keyframes描述 3–5 帧左右的左右抖动（比如transform: translateX(-4px)→translateX(4px)→translateX(-2px)→translateX(0)） - 动画时长控制在
200ms内，否则像卡顿；延迟设为0s，填充模式用forwards避免回弹 - 别用
transition模拟震动——它只能做线性缓动，没法表达“突兀—回弹—停稳”的错误提示语义
shake 动画要适配高 PPI 屏幕和不同设备尺寸
写死 translateX(4px) 在 iPhone 15 Pro Max 上几乎看不见，在旧安卓机上又可能抖得太猛。震动幅度不是像素值问题，而是视觉相对比例问题。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
rem或vw单位定义位移量（例如translateX(-0.1rem)），让震动幅度随根字号或视口宽度缩放 - 对
prefers-reduced-motion: reduce做降级：媒体查询里把动画时长设为0.01ms或直接animation: none - 避免在
transform中混用px和%，会导致 Chrome 某些版本渲染错位 - 真机测试重点看 iOS 微信内置浏览器——它常把
transform动画帧率锁在 30fps，需加will-change: transform提前提示合成层
错误提醒场景下，震动必须和状态变更同步触发
常见错误是：表单校验失败后，只改了文字颜色或显示提示框，再等用户点“确定”才触发震动。这会让用户觉得震动和错误无关，反而像 UI bug。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 震动必须和错误态绑定，比如输入框失去焦点（
blur）且校验不通过时，立刻给该input添加shakeclass - 如果用 React/Vue，别在
setState或nextTick后再加 class——DOM 更新有延迟，震动会滞后；改用requestAnimationFrame包一层确保时机 - 连续错误（如快速连点提交按钮）要防重复触发：加节流标记，动画结束前忽略新震动请求（监听
animationend事件清除） - 震动不是越频繁越好：同一元素 2 秒内最多触发一次，否则用户手还没抬起来就又抖，体验变成干扰
别用 outline 或 box-shadow 替代震动
有人试图用快速切换 outline 颜色或闪烁 box-shadow 来“模拟”反馈，但这在可访问性上是负分——屏幕阅读器无法感知，键盘用户也看不到，更不符合 WCAG 2.1 中“非文本内容需提供替代机制”的要求。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 震动只是视觉通道补充，必须搭配其他错误信号：比如
aria-invalid="true"+aria-describedby指向错误文案 - 震动动画的
keyframes不要依赖 opacity 变化（易被系统减少动画强度），专注transform位移 - 如果项目强制要求零 JS，可用
:focus-within+ 表单父容器状态控制震动 class，但兼容性限于现代浏览器，iOS Safari 15.4+ 才稳定支持
震动本身很简单，难的是它总在最不该失效的地方失效：输入法弹出时、页面滚动中、WebView 加载未完成时。这些边界情况没法靠一套动画代码覆盖，得靠真实设备上反复点、输、切后台再切回来测。
