震动效果核心是用translateX/Y在极短时间内反复正负偏移（如±4px），需奇数关键帧且首尾归零，JavaScript控制class触发，避免动画残留和移动端失效。
震动效果的核心原理是快速左右/上下偏移
CSS 震动不是靠抖动（transform: rotate() 或模糊），而是用 translateX() 和 translateY() 在极短时间内反复切换正负偏移值，利用人眼视觉暂留形成“抖动”感。关键在于位移幅度小（通常 ±2px ~ ±8px）、周期短（总时长 ≤ 0.5s）、关键帧密集（至少 4–6 帧）。
@keyframes 震动动画必须包含奇数个关键帧才能归位
如果只写 0% { transform: translateX(0); } 和 100% { transform: translateX(4px); }，元素最终会停在偏移位置，失去“震动后复位”的真实感。正确做法是让首尾帧都为 translateX(0)，中间穿插不对称偏移：
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-4px); }
50% { transform: translateX(4px); }
75% { transform: translateX(-2px); }
}
- 用
0%和100%强制归零，避免布局偏移残留 - 中间帧不要对称（比如 25%/75% 都设 -4px），否则动画会显得机械、不自然
- 偏移值建议用偶数像素（如 2/4/6px），避免 subpixel 渲染导致模糊
触发震动不能只靠 animation: shake 1s
直接在元素上写 animation: shake 0.4s ease-in-out 会导致页面加载就执行，或无法重复触发。实际使用中必须配合 JavaScript 控制播放时机：
- 给元素添加临时 class（如
.is-shaking），动画定义在该 class 上 - 用
element.classList.add('is-shaking')触发，再用animationend事件自动移除 - 务必加
animation-fill-mode: forwards？❌ 不要——震动必须归位，所以应保持默认none - 若需连续震动（如表单校验失败多次），两次触发间隔至少 50ms，否则浏览器可能丢帧
移动端震动容易失效的三个原因
iOS Safari 和部分安卓 WebView 对高频 transform 动画有节流，尤其在页面滚动或后台标签页中：
立即学习“前端免费学习笔记（深入）”；
- 确保父容器没设置
overflow: hidden或will-change: transform冲突 - 震动动画时长别超过 0.6s，否则 iOS 可能降帧至 30fps 以下，抖感变弱
- 真机测试时，禁用「减少动画」系统设置（iOS：设置 > 辅助功能 > 动态效果 > 减少动态效果）
震动不是炫技，它本质是反馈信号——幅度太小用户感知不到，太大又像 bug。最稳妥的起点是 translateX(±4px) + 0.4s + 5 帧，再根据设备和场景微调。
