真正晃动需非对称关键帧（如-5deg→10deg→-5deg→5deg→0deg），配合translateX增强动感，用animation而非transition实现多段抖动，时长0.5s、ease-in-out更自然，须适配prefers-reduced-motion并慎用循环。
用 @keyframes 定义晃动动画时，关键帧数值不能对称
对称的旋转角度（比如 0deg → 10deg → 0deg）会让动画看起来像“点头”而非“晃动”。真正晃动需要非对称、带方向变化的偏移，例如左偏多、右偏少，再快速回弹。
- 推荐 keyframe 节点设为
0%, 25%, 50%, 75%, 100%，便于控制节奏 - 旋转角度建议用
-5deg, 10deg, -5deg, 5deg, 0deg这类不规则序列 - 避免全程用
transform: rotate()单一属性——纯旋转容易晕眩，可加轻微translateX增强晃动感
:hover 触发时必须用 animation 而非 transition
transition 只能做起点→终点的线性过渡，无法实现多段抖动。晃动本质是循环播放的帧动画，必须靠 animation 驱动。
- 动画名要和
@keyframes定义的名称完全一致（区分大小写） - 必须显式设置
animation-duration和animation-timing-function，否则默认为0s，动画不执行 - 加
animation-fill-mode: forwards无意义——晃动是悬停中持续发生的，不需要保留结束态
按钮悬停晃动的实际 CSS 写法
@keyframes shake {
0% { transform: rotate(-5deg) translateX(-2px); }
25% { transform: rotate(10deg) translateX(3px); }
50% { transform: rotate(-5deg) translateX(-2px); }
75% { transform: rotate(5deg) translateX(1px); }
100% { transform: rotate(0deg) translateX(0); }
}
button:hover {
animation: shake 0.5s ease-in-out;
}
注意：ease-in-out 比 linear 更自然；0.5s 是单次完整晃动时长，太短会卡顿，太长失去“突然晃”的效果；若需循环晃动（如持续悬停时反复抖），加 infinite ——但慎用，易引发用户不适。
移动端和可访问性要注意的坑
晃动动画在 iOS Safari 上可能被强制禁用（尤其开启「减少动画」系统设置时），且 WCAG 明确建议避免高频闪烁/晃动，否则可能诱发光敏性癫痫。
立即学习“前端免费学习笔记（深入）”；
- 生产环境务必加
@media (prefers-reduced-motion: reduce)降级处理 - 不要对所有按钮统一加晃动，仅用于强调型操作（如「删除」「退出登录」等高风险动作）
- 晃动幅度别超过
±10deg，位移别超±5px，否则影响文字可读性和点击精度
