纯CSS悬停抖动应仅用transform: translate实现，避免重排；建议±2px幅度、0.3s时长、4–6帧非对称位移；设animation-iteration-count: 1且禁用移动端抖动。
抖动动画用 transform: translate 实现最可靠
纯 CSS 悬停抖动，transform: translate() 是唯一推荐方式。用 margin 或 left/top 触发重排，抖起来卡顿还影响布局；transform 走合成层，60fps 有保障。
关键不是“能不能抖”，而是抖得稳、不闪、不拉扯旁边元素。所有抖动帧必须只改 translateX 和/或 translateY，其他属性一概不动。
- 别在
@keyframes里写margin-left: 2px—— 这是性能杀手 - 抖动幅度建议控制在 ±2px 以内，超过 ±4px 容易引发视觉不适
- 动画时长设
0.3s左右最自然，太短像抽搐，太长像卡顿
@keyframes 抖动帧要避开 0%→100% 线性往返
直接写 0% { transform: translate(0, 0); } 100% { transform: translate(2px, 2px); }，浏览器会补中间帧，抖感弱且方向单一。真抖动得“乱”，但又得可控。
正确做法是手动定义 4–6 帧，让位移值非对称、非规律：
立即学习“前端免费学习笔记（深入）”；
@keyframes shake {
0% { transform: translate(0, 0); }
25% { transform: translate(-2px, 1px); }
50% { transform: translate(1px, -2px); }
75% { transform: translate(2px, 1px); }
100% { transform: translate(0, 0); }
}
- 帧数别太少（少于 4 帧易显机械），也别太多（超 8 帧维护成本高，收益低）
- 每帧的
translateX/translateY值尽量不重复，避免节奏感过强 - 首尾帧必须严格一致（
translate(0, 0)），否则悬停结束会跳一下
:hover + animation 触发时注意循环与填充模式
抖动是瞬态反馈，不是持续状态。用 animation-iteration-count: infinite 会一直抖，用户移开鼠标后还在晃，体验极差。
- 必须设
animation-iteration-count: 1，只抖一次 - 加
animation-fill-mode: forwards？别加——抖完要回原位，不是停在最后一帧 - 触发用
:hover就够，别套@media (hover: hover)，现代浏览器默认支持 - 兼容性兜底：老版 Safari 需加
-webkit-animation前缀，但 iOS 13+ 可忽略
完整声明示例：a:hover { animation: shake 0.3s ease-in-out 1; }
移动端慎用，或加 pointer-events 判断
手机端没 hover，但部分 Android 浏览器会模拟首次点击触发 :hover，导致点一下就抖，干扰操作。这不是 bug，是规范行为。
- 如果按钮本身有点击逻辑（如提交表单），抖动必须禁用，否则用户误以为“没点上”而连点
- 简单方案：用
@media (hover: none)直接关掉动画：@media (hover: none) { a:hover { animation: none; } } - 更稳妥的做法是只对
button或带cursor: pointer的元素启用，避免文字链接意外抖动
抖动不是装饰，是信号。信号太强或时机不对，用户第一反应是“页面出错了”。
