最可靠纯CSS图标晃动效果需用transform+@keyframes实现，核心是五段关键帧配合超调缓动模拟惯性，设infinite循环防重排，移动端改用touchstart触发。
用 transform + animation 实现晃动效果最可靠
纯 CSS 实现图标晃动，核心是用 transform: rotate() 或 translateX() 配合关键帧动画。不推荐用 margin 或 padding 动画，重排开销大，卡顿明显；transform 走 GPU，性能好，兼容性也够（IE10+ 支持）。
常见错误是直接在 :hover 里写多组 transform 值试图“抖动”，结果只生效最后一次——必须用 @keyframes 定义完整周期。
- 晃动幅度别超过 ±8deg 或 ±6px，过大显得廉价，还可能触发 iOS Safari 的渲染 bug
- 动画时长控制在
0.4s～0.6s，太快看不出效果，太慢失去提醒感 - 加
animation-timing-function: ease-in-out让起止更自然，避免机械式来回
图标元素必须是块级或行内块才能正确应用 transform
如果图标是 或 默认行内元素，transform 会生效但可能错位或尺寸异常。必须显式设置 display: inline-block 或 display: block。
尤其用 Font Awesome 或 iconfont 时， 这类默认行内，不设 display 可能导致晃动中心偏移、文字基线跳动。
- 加
vertical-align: middle防止晃动时和其他文字对不齐 - 若图标父容器有
line-height，晃动可能被裁切，建议父容器加overflow: visible - 避免在
svg外层套div再动画——直接对svg或其元素加动画更稳
防止连续悬停触发多次动画，加 animation-play-state 控制
用户快速进出图标区域时，:hover 频繁切换会导致动画反复重播，视觉混乱。用 animation-play-state: paused/running 比单纯依赖 animation-fill-mode 更可控。
典型写法是默认暂停动画，悬停时播放一次，离开后重置状态——但注意：CSS 无法直接“重置动画进度”，所以得靠 animation-delay 和 animation-iteration-count 配合。
- 给动画设
animation-iteration-count: 1，确保只播一遍 - 悬停样式里加
animation-play-state: running，默认状态为paused - 如果需要“每次悬停都重新播”，必须用 JS 清除并重设
animation属性（CSS 本身做不到强制重播）
移动端需额外处理：禁用 :hover 伪类，改用 touchstart 触发
iOS 和 Android Chrome 在触摸设备上对 :hover 支持不稳定——有时不触发，有时延迟，甚至误触相邻元素。不能依赖 :hover 做核心交互。
简单方案是用 JS 监听 touchstart 给图标临时加一个 class（如 is-shaking），再用该 class 触发动画；同时保留 :hover 供桌面端使用。
- CSS 中写两套规则：
.icon:hover, .icon.is-shaking { animation: shake 0.5s; } - JS 里用
el.addEventListener('touchstart', () => el.classList.add('is-shaking')) - 加
setTimeout(() => el.classList.remove('is-shaking'), 500)避免 class 残留
动画的节奏感和触发时机比炫技更重要。很多人堆参数想做出“强烈晃动”，结果反而干扰阅读；真正有效的提醒，是让用户一眼注意到，而不是盯着图标看三秒才反应过来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
