真正晃动需非对称关键帧（如-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 ——但慎用，易引发用户不适。

Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries

规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...

下载

移动端和可访问性要注意的坑

晃动动画在 iOS Safari 上可能被强制禁用（尤其开启「减少动画」系统设置时），且 WCAG 明确建议避免高频闪烁/晃动，否则可能诱发光敏性癫痫。

立即学习“前端免费学习笔记（深入）”；

• 生产环境务必加 @media (prefers-reduced-motion: reduce) 降级处理
• 不要对所有按钮统一加晃动，仅用于强调型操作（如「删除」「退出登录」等高风险动作）
• 晃动幅度别超过 ±10deg，位移别超 ±5px，否则影响文字可读性和点击精度

实际项目里，多数所谓“晃动”需求，其实只需要一次轻量抖动提示就够了。真要循环晃，得先确认设计师和产品是否真的理解这个交互带来的生理负担。