如何实现CSS左右摇摆的警告动画_通过rotate角度的正负值循环-css教程-PHP中文网

左右摇摆动画本质是绕y轴正负交替的小角度周期性旋转，需用@keyframes定义对称关键帧（如0%→-4deg→0%→4deg→0%），配合ease-in-out、0.7s时长、3次循环及forwards填充，并显式设置transform-origin以确保旋转中心准确。

如何实现css左右摇摆的警告动画_通过rotate角度的正负值循环

用 `@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：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

图标类元素：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 已基本不用），而是降级处理：