抖动必须用@keyframes定义帧序列并配合animation触发，因CSS不支持同一规则内多个transform声明叠加；推荐0.4s、ease-in-out、±3px四帧非对称动画，配合display:inline-block和will-change:transform提升兼容性。
为什么直接用 transform: translateX() 抖动会失效
很多初学者写 :hover 时直接加 transform: translateX(-5px); transform: translateX(5px);，这根本不会动——CSS 不支持在同一个规则里写多个 transform 声明覆盖，后写的会完全替换前一个。抖动必须靠 @keyframes 定义帧序列，再用 animation 触发。
怎样写一个可控的左右抖动 @keyframes
抖动不是越快越好，人眼能感知的节奏在 0.3–0.6s 比较自然；帧点要避开对称停顿（比如 0%→100% 直接来回），否则容易卡顿或显得机械。
@keyframes shake { 0% { transform: translateX(0); } 25% { transform: translateX(-4px); } 50% { transform: translateX(0); } 75% { transform: translateX(4px); } 100% { transform: translateX(0); } }- 用
animation-timing-function: ease-in-out让进出更柔和，避免生硬弹跳 - 别用
infinite——悬停一次抖 1–2 次就够了，否则用户移入就晕
:hover 触发抖动时的常见兼容与性能问题
抖动动画如果绑定在 li:hover 上，但父容器用了 overflow: hidden，抖动位移超出边界会被裁掉；另外 Safari 对 transform 的硬件加速不总稳定，加 will-change: transform 能减少闪烁。
- 必须给触发元素设
display: inline-block或display: block，inline元素默认不支持transform - 抖动幅度建议 ≤ ±6px，太大影响可读性，也容易触发移动端误操作
- 不要在
:hover里同时改color和transform动画——重绘+重排压力大，优先只动transform和opacity
完整可用的最小代码块
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-3px); }
50% { transform: translateX(0); }
75% { transform: translateX(3px); }
}
<p>li:hover {
animation: shake 0.4s ease-in-out;
display: inline-block; /<em> 关键：确保 transform 生效 </em>/
}</p>
注意：如果列表项本身有 padding 或 margin，抖动可能被视觉干扰，建议先清掉或统一用 box-sizing: border-box 控制尺寸基准。抖动是细节反馈，不是功能必需，上线前务必在真实触控设备上验证是否误触发。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
