用 CSS @keyframes 配合 transform: translateX() 实现左右晃动，避免使用 margin 或 left/right 触发重排；推荐位移量 ±5px~±12px、时长 0.4s~0.6s、ease-in-out 缓动；需防溢出、禁交互、兼顾兼容性与无障碍。
用 CSS animation 实现左右晃动效果
HTML 本身不提供晃动能力，必须靠 CSS 的 @keyframes 配合 transform: translateX() 来模拟。核心是让元素在水平方向周期性偏移，视觉上产生“晃动”感。
常见错误是直接用 margin-left/right 或 left/right 动画——这会触发重排（layout），性能差，且容易抖动不自然。
推荐写法：
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-10px); }
50% { transform: translateX(0); }
75% { transform: translateX(10px); }
}
.shake {
animation: shake 0.5s ease-in-out;
}
把 shake 类加到目标元素上即可触发一次晃动。如需持续晃动，加 infinite： animation: shake 0.5s ease-in-out infinite;
立即学习“前端免费学习笔记（深入）”；
控制晃动强度、频率和触发时机
晃动是否“像被推了一下”还是“一直发抖”，取决于三个参数：位移量（px）、周期时长（s）、缓动函数（timing function）。
- 位移量太小（如 ±2px）看不出效果；太大（如 ±30px）显得失真——
±5px ~ ±12px是常用范围 - 单次晃动建议
0.4s ~ 0.6s，太快像闪，太慢像摇晃而非“晃” -
ease-in-out比linear更有物理感；想强化“突然受力”，可用cubic-bezier(0.36, 0.07, 0.19, 0.97) - 不希望自动播放？去掉
animation声明，改用 JS 动态添加类：element.classList.add('shake')，再用animationend事件清理
避免布局塌陷和交互阻塞
晃动时如果父容器没设 overflow: hidden，可能看到子元素移出边界；更隐蔽的问题是：晃动期间用户仍能点击/聚焦元素，导致误操作。
稳妥做法：
- 给晃动元素加
pointer-events: none，晃动结束后恢复（JS 控制） - 父容器加
overflow: hidden防止内容溢出干扰视觉 - 若元素含表单控件（如
<input>），晃动中禁用输入更安全：input[disabled]或临时设tabindex="-1" - 慎用
transform: scale()混合动画——缩放会改变点击热区，引发坐标错位
兼容性与移动端注意事项
现代浏览器都支持 transform 动画，但 iOS Safari 旧版本（≤12.5）对 translateX() 动画偶有渲染延迟。若需保底，可加 will-change: transform 提前提示合成器。
移动端还要注意：
- 避免在
scroll或touchmove中频繁触发动画——用防抖或requestAnimationFrame节流 - 部分安卓 WebView 对
infinite动画内存释放不及时，长时间运行后卡顿，建议限制最大循环次数（如用 JS 控制播放 3 次后停） - 晃动不是无障碍友好操作，对有前庭敏感的用户可能引发不适，生产环境建议提供关闭开关（如通过
@media (prefers-reduced-motion: reduce)关停）
真正难的不是写出来，而是判断该不该晃、晃多久、晃给谁看——动效一旦脱离上下文，就只剩干扰。
