移动端抖动动画必须用 transform: translateX()，禁用 margin 或 left；需合并 transform 值、设四状态 keyframes、精准触发到出错字段、动态定位提示框并用 visibility: hidden 代替 display: none。
移动端抖动动画必须用 transform: translateX()，别碰 margin 或 left
在 iOS 和 Android WebView 中，margin 或 left 触发的动画会强制重排（reflow），连续抖动时极易卡顿甚至掉帧。而 transform: translateX() 走 GPU 合成，无布局计算，是唯一稳妥选择。
- 务必合并写法：如果元素已有
transform: scale(1)，不能单独加translateX(4px)，得写成transform: scale(1) translateX(4px)，否则后者被覆盖 - 不要用
transition模拟抖动——Safari 对transform过渡插值不一致，容易“滑”过去，失去警示感 - 幅度控制在 ±6px，时间设为
0.4s，太小用户注意不到，太大像 UI 抖动而非错误反馈
@keyframes shake 必须覆盖四状态，且首尾都为 translateX(0)
只写 0% 和 100% 两个关键帧，浏览器会线性插值，结果是平滑位移，不是“弹”；用 ease-in-out 缓动还会削弱警示强度。
- 标准写法必须包含：0% → 25% → 50% → 75% → 100%，对应
0 → +6px → -6px → +6px → 0 - 首尾都是
translateX(0)，否则动画结束元素停留在偏移位置，下一次校验可能从错位起点开始 - 加上
animation-fill-mode: forwards，避免动画播完瞬间回弹造成“抽搐感”
触发抖动要精准到出错字段，且必须清理旧动画
给整个 <form></form> 加 shake 类，视觉干扰大，还掩盖具体问题字段；更糟的是，连续提交失败时若只反复 add 同一个 class，浏览器可能跳过重绘——因为类名没变，CSS 认为无需重播动画。
- 目标元素应是出错的
<input>、<select></select>，或其直接包裹容器（如<div class="field">） <li>每次触发前先执行 <code>element.classList.remove('shake')，再void element.offsetWidth强制重排，最后element.classList.add('shake') - 监听
animationend清理 class，但注意：移动端 Safari 有时会漏触发该事件，建议加 500ms 超时兜底 - 错误提示容器父级必须设
position: relative，且每个字段独立包裹，不能共用一个定位上下文 - 提交校验后，用
element.getBoundingClientRect()实时读取输入框位置，动态设置提示框的top和left - 必要时降级为
position: fixed，配合window.scrollY和getBoundingClientRect().top手动修正坐标 - 千万别用
display: none控制提示显隐——它会导致光标跳动、自动填充重排，改用visibility: hidden+height: 0+overflow: hidden
移动端键盘弹起时定位失效，position: absolute 不可靠
iOS 键盘弹出后视口高度剧变，top: 100% 计算的位置会严重偏移，提示框飘到屏幕外或遮挡输入框。
立即学习“前端免费学习笔记（深入）”；
:user-invalid 的重绘延迟、键盘弹起后 getBoundingClientRect() 返回值未更新、甚至某些安卓 WebView 对 animationend 的兼容性缺失——这些都得靠 JS 主动探测+兜底，不能只靠 CSS 声明。
