抖动动画应使用 transform: rotate() 配合 animation，旋转角度控制在 ±2°～±5°，配合 transform-origin、0.3s～0.5s 动画时长、cubic-bezier(0.45, 0.15, 0.55, 0.85) 缓动函数及 animation-fill-mode: forwards。
抖动动画该用什么 CSS 属性组合
直接用 transform: rotate() 配合 animation 做“抖动”效果，本质是快速、小幅度、方向交替的旋转。所谓 small-rotate 并不是标准属性或类名，而是指旋转角度控制在 ±2°～±5° 之间——超过 ±6° 就容易显得生硬或眩晕，低于 ±1° 又几乎看不出效果。
关键点在于：不能只写 rotate(2deg)，必须配合 transform-origin 控制旋转中心（默认是元素中心，但图标通常更适合以中心为轴），且动画时长和缓动函数要匹配抖动感：
-
animation-duration控制在 0.3s～0.5s，太长不“抖”，太短难触发 -
animation-timing-function推荐cubic-bezier(0.45, 0.15, 0.55, 0.85)（类似ease-in-out但更突兀），避免用linear或ease - 必须加
animation-fill-mode: forwards，否则悬停结束会闪回原位
:hover 里写 animation 为什么没反应
常见原因是选择器没命中目标元素，或动画定义缺失关键部分。比如图标用的是 <i class="icon-home"></i>，但 CSS 写成了 .icon:hover { ... }（少了个 -home）；或者只写了 @keyframes 却忘了在 :hover 中调用 animation。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保目标元素有明确宽高（
display: inline-block或设font-size），否则transform可能无效 - 动画名必须完全一致：
@keyframes shake→animation-name: shake，大小写敏感 - 别漏掉厂商前缀（虽然现代浏览器基本不需要），但若需兼容 iOS Safari ≤12，可加
-webkit-animation - 检查是否被更高优先级样式覆盖，例如父级写了
pointer-events: none
如何让抖动只发生在鼠标进入瞬间，而不是持续循环
默认 animation-iteration-count: infinite 是循环抖，但真实交互中，用户更想要“进入时抖一下”——这就得把动画次数设为 1，并靠 animation-delay 配合伪类时机控制。
更可靠的做法是用 animation-play-state + :hover 触发：
@keyframes small-shake {
0% { transform: rotate(0); }
25% { transform: rotate(-3deg); }
50% { transform: rotate(2deg); }
75% { transform: rotate(-2deg); }
100% { transform: rotate(0); }
}
.icon {
animation: small-shake 0.4s cubic-bezier(0.45, 0.15, 0.55, 0.85) 1 paused;
}
.icon:hover {
animation-play-state: running;
}
这样动画只在悬停时播放一次，离开后不会倒播或残留状态。
移动端点击抖动失效怎么办
iOS Safari 和部分安卓 WebView 默认不触发 :hover（除非模拟桌面模式），导致抖动完全不执行。这不是 bug，是规范行为——触摸设备没有“悬停”概念。
解决路径只有两条：
- 改用 JavaScript 监听
touchstart+touchend，动态增删类名（如.is-shaking），再用 CSS 控制该类的动画 - 放弃纯 CSS 方案，在
@media (hover: hover)查询内才启用:hover动画，对触屏设备降级为点击反馈（如变色或缩放） - 注意：不要给图标加
cursor: pointer后就以为移动端也能 hover，它只影响光标样式，不激活伪类
真正难处理的不是怎么写动画，而是判断什么时候不该用抖动——比如在无障碍场景下，WCAG 明确建议避免闪烁/抖动类动画，除非用户已明确开启动画偏好。这点常被忽略。
