左右摇摆动画本质是绕Y轴正负交替的小角度周期性旋转，需用@keyframes定义对称关键帧（如0%→-4deg→0%→4deg→0%），配合ease-in-out、0.7s时长、3次循环及forwards填充，并显式设置transform-origin以确保旋转中心准确。
用 @keyframes 控制 rotate 正负交替是核心
左右摇摆动画本质是绕 Y 轴做小角度的周期性往复旋转，不能只靠单向递增（比如 0deg → 10deg → 20deg），必须让 transform: rotate() 在正负值之间来回跳变。CSS 动画里最直接的方式就是定义关键帧，在 0% 和 100% 设相同值（比如 0deg），中间用 50% 设一个反向偏移（比如 -5deg 或 5deg），再配合 animation-timing-function: ease-in-out 或 ease 让过渡更自然。
常见错误是把 50% 写成 10deg，100% 写成 -10deg——这样动画会从 0 → 10 → -10，产生“甩过去再弹回来”的突兀感，而不是平滑摇摆。真正要的是 0 → -5 → 0 → 5 → 0 这类对称震荡，所以推荐三段式关键帧：
@keyframes shake-warning {
0% { transform: rotate(0deg); }
25% { transform: rotate(-4deg); }
50% { transform: rotate(0deg); }
75% { transform: rotate(4deg); }
100% { transform: rotate(0deg); }
}
animation-duration 和 iteration-count 要匹配警告场景
摇摆不是越快越好，也不是越多越好。过短的 duration（如 0.2s）会让眼睛来不及捕捉动作，反而削弱警示效果；过长（如 2s）又显得拖沓。实测 0.6s–0.8s 是较平衡的区间。
重复次数也得看用途：表单校验出错时建议用 animation-iteration-count: 2 或 3，避免干扰用户操作；而系统级严重警告（如删除确认）可设为 infinite，但必须搭配 animation-play-state: paused 初始态，并在触发后用 JS 切换为 running，否则页面一加载就狂抖。
立即学习“前端免费学习笔记（深入）”；
-
animation-duration: 0.7s—— 单次完整摇摆周期（0 → -4 → 0 → 4 → 0） -
animation-iteration-count: 3—— 摇三次自动停，不打断后续交互 -
animation-fill-mode: forwards—— 确保最后一次停在0deg，避免残留旋转影响布局
rotate 摇摆必须配合 transform-origin 才稳
默认 transform-origin 是元素中心点（50% 50%），但警告图标或输入框往往需要“像被拽着一边晃”——比如红叹号图标更适合以底部中点为轴心旋转，否则会看起来像在原地打转。这时候得显式设置 transform-origin：
- 图标类元素：
transform-origin: bottom center（更像真实物理晃动） - 输入框整体：
transform-origin: center（保持居中提示，不偏移位置） - 绝对定位的提示气泡：
transform-origin: top left（避免因旋转导致遮挡偏移）
漏掉这步最常导致的问题是：动画过程中元素视觉位置轻微漂移，或者摇摆幅度看起来不对称——其实是旋转中心没对齐视觉重心。
IE 和旧 Safari 下 rotate 摇摆容易失效
IE10+ 支持 transform: rotate()，但不支持 transform-origin: bottom center 这种双值写法（只认 bottom center 字符串，不认空格分隔），且动画性能差，容易卡顿。Safari 9–12 对 @keyframes 中多次 transform 声明有缓存 bug，可能只执行第一次 rotate 值。
兼容方案不是加前缀（-webkit-transform 已基本不用），而是降级处理：
- 给
.shake-warning类同时写transform和-webkit-transform，值完全一致 - 避免在关键帧里混用
rotate()和translate()，IE 对复合 transform 解析不稳定 - 真要支持 IE9，改用 JS 驱动 class 切换（如
shake-1→shake-2），每帧手动设 style
现在多数项目已放弃 IE，但 Safari 11/12 的 transform-origin 解析异常仍偶发——最稳妥的做法是所有摇摆动画都用 center 作为 origin，避开 bottom/top/left/right 组合值。
