摇晃动画必须用@keyframes定义至少3个关键帧实现往复节奏，如0%→25%→50%→75%→100%角度变化，首尾为0deg确保循环自然，幅度宜控在±3deg~±8deg，配合0.4s~0.6s时长和非对称角度增强真实感。
摇晃动画为什么不能只用 transform: rotate(10deg) 单次旋转
单次 rotate() 只是静态偏移，没有“摇晃”所需的往复节奏。真正摇晃是小角度、高频、左右交替的多帧运动，比如从 -5deg → 0deg → +5deg → 0deg → -5deg，形成类似警告时头部快速侧摆的视觉反馈。
关键点在于：必须用 @keyframes 定义至少 3 个关键帧（起始→右倾→左倾→回中），且首尾帧角度需一致（通常是 0deg），否则动画循环时会跳变。
- 常见错误：只写
0% { transform: rotate(-5deg); } 100% { transform: rotate(5deg); }→ 动画来回线性扫过，像钟摆但不“晃”，缺少停顿感和急停感 - 更贴近真实摇晃的做法是加入中间帧（如 25%、50%、75%）并控制缓动，让两端稍慢、中间稍快
- 纯
rotate()摇晃建议幅度控制在 ±3deg ~ ±8deg，超过 ±10deg 易显滑稽或干扰可读性
如何用 @keyframes 写出有停顿感的警告摇晃
下面这段动画模拟了“突然警觉—左右急晃两次—回归”的节奏，比匀速循环更抓人眼：
@keyframes shake-warning {
0%, 100% { transform: rotate(0deg); }
25% { transform: rotate(-5deg); }
50% { transform: rotate(3deg); }
75% { transform: rotate(-2deg); }
}
说明：
-
0%和100%都设为rotate(0deg)，确保循环自然衔接 - 把最大偏角放在
25%（-5deg），而非正中，制造“第一下更猛”的错觉 -
50%回到正向小角度（3deg），不是对称的 +5deg，避免机械对称感 - 不用
ease-in-out全局缓动——它会让所有阶段都变柔和；摇晃需要局部“卡顿”，靠关键帧位置和角度差来控制节奏
animation 属性里哪些参数容易被忽略却影响效果
光有 @keyframes 不够，触发和表现全靠 animation 的组合参数：
-
animation-duration：警告摇晃建议 0.4s ~ 0.6s/轮，太长像头晕，太短（ -
animation-timing-function：别用默认ease；推荐cubic-bezier(0.3, 1.2, 0.7, 0.8)这类略带过冲的曲线，增强“甩”的感觉 -
animation-iteration-count：警告场景通常只需2或3次，设infinite容易让用户烦躁 -
animation-fill-mode：务必加forwards，否则动画结束瞬间图标会弹回原始状态，破坏警示连续性
完整应用示例：
.warning-icon {
animation: shake-warning 0.5s cubic-bezier(0.3, 1.2, 0.7, 0.8) 2 forwards;
}
实际项目中要防的兼容与干扰问题
摇晃动画看似简单，但在真实 UI 中常因以下原因失效或异常：
- 父容器设置了
overflow: hidden，而摇晃时图标超出边界 → 解决：给父元素加overflow: visible或扩大 padding - 图标本身用了
display: inline-block且存在基线对齐（baseline）位移 → 摇晃时上下浮动，像在跳动 → 解决：加vertical-align: top或改用display: block - 某些旧版 Safari（transform 多帧动画渲染不稳定 → 必须加
-webkit-transform前缀，并在@keyframes里重复声明 - 如果图标是 SVG，注意不要在
<svg></svg>标签上直接写transform行内样式，它会与 CSS 动画冲突 → 应统一用 class 控制
最常被漏掉的一点：摇晃动画不该在页面加载就自动触发。应绑定在用户操作后（如表单校验失败、按钮禁用态激活），否则一进来就晃，既无意义又伤体验。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
