图标hover晃动需用五段关键帧与超调缓动模拟惯性，设infinite循环并防重排；移动端应改用touchstart或更稳定的scale+亮度变化。
hover 时用 @keyframes 做图标晃动，关键不是加动画，而是控制震荡幅度和节奏
直接套用 rotate(5deg) 往返切换会显得生硬，人眼感知的“晃动提醒”需要轻微、非对称、带点惯性——比如先快偏右，再慢回中，略过中线再小幅左弹。CSS 的 @keyframes 本身不支持物理模拟，得靠关键帧位置和缓动函数凑出这种感觉。
实操建议：
- 用
0%, 25%, 50%, 75%, 100%五段关键帧，避免只用0% → 100%线性来回（那只是摇头，不是晃） -
25%设为rotate(6deg)（右偏），50%回到rotate(-2deg)（左弹过中线），75%收到rotate(1deg)，最后归零 - 动画函数必须用
cubic-bezier(.3,1.2,.4,1)这类带“超调”的缓动，原生ease-in-out太温吞 - 别忘了加
transform-origin: center，否则图标可能绕左上角甩，不是绕自身中心晃
为什么 animation: shake 0.4s ease-in-out 总是只晃一次就停
因为默认 animation-iteration-count 是 1，hover 进去触发一次就结束了。但用户悬停期间你通常希望它持续轻晃（比如每 1.2 秒循环一次），而不是“咔一下完事”。
实操建议：
- 显式写
animation: shake 0.4s ease-in-out infinite，infinite不可省略 - 如果只想晃两下就停，用
2而不是infinite，但注意：两次之间有间隔，需靠animation-delay或拆成两个动画控制节奏 - 更稳妥的做法是把单次晃动周期拉长到
1.2s，用infinite+ 缓动压住起始/结束速度，视觉上更像自然微颤
图标晃动时文字错位或父容器跳动怎么办
这是 transform: rotate() 触发重排（reflow）的典型表现——尤其当图标是 inline 元素或未设 vertical-align 时，旋转会导致基线偏移，连带文字上浮/下沉。
实操建议：
- 给图标元素加
display: inline-block和vertical-align: middle，切断与行内文本的基线绑定 - 父容器若高度不稳定，加
line-height: 0或font-size: 0（再单独给子元素设字号），消除行盒干扰 - 绝对不要在晃动元素上同时用
margin或position: relative做微调——动画期间这些值会被反复读取计算，加剧抖动
移动端 hover 根本不触发？别硬套 desktop 写法
真机上没有 “hover” 概念，:hover 伪类在 iOS Safari 和多数安卓浏览器里仅在点击后短暂生效（且不保证），指望它做提醒几乎无效。
实操建议：
- 改用
:active配合touchstart事件临时加 class，例如icon.addEventListener('touchstart', () => icon.classList.add('shake-active')) - CSS 里写
.shake-active { animation: shake 0.4s cubic-bezier(.3,1.2,.4,1) }，并确保动画结束后自动移除 class（用animationend） - 更省事的方案：干脆放弃晃动，改用
scale(1.08)+filter: brightness(1.1)组合，这类变换在移动端更稳定、功耗更低
真正难的不是写出晃动动画，而是让同一段 CSS 在不同设备、不同交互路径下都给出一致的“被注意到”感——这往往意味着要放弃纯 CSS 方案，接受 JS 辅助判断交互类型。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
