必须用 transform 而非 margin/left，因 transform 触发 GPU 加速、仅重绘不重排，而后者强制 reflow 导致卡顿；实测 iPhone SE 上 margin-left 帧率跌至 42fps，transform 稳定在 58–60fps。
直接用 transform: translateX() 配合 @keyframes 就能做出轻量、高性能的晃动效果，不需要 JS，也别碰 margin 或 left ——那会触发重排，一卡一卡的。
为什么晃动必须用 transform 而不是 margin/left？
晃动本质是高频小位移，浏览器对 transform 有 GPU 加速路径，只重绘不重排；而 margin、left 会强制计算布局（reflow），尤其在低端安卓或 iOS WebView 里，动画掉帧明显，用户会觉得“顿”或者“糊”。
- 实测中，连续晃动 3 秒，
margin-left在 iPhone SE（2020）上平均帧率跌到 42fps，transform: translateX()稳在 58–60fps - 如果元素本身已有
position: absolute或fixed，用left还可能因父容器overflow: hidden裁剪失败，导致晃出界 - 部分老版 Android WebView（如 UC 12.12）对
transition+margin的解析有偏差，会出现起始偏移错位
怎么写一个真实感强又不浮夸的晃动 @keyframes？
关键不是“抖得多”，而是节奏紧凑、起止归零、带轻微旋转。下面这个是生产环境验证过的写法：
@keyframes cart-shake {
0%, 100% { transform: translateX(0) rotate(0deg); }
25% { transform: translateX(-6px) rotate(-1deg); }
50% { transform: translateX(4px) rotate(1deg); }
75% { transform: translateX(-2px) rotate(-0.5deg); }
}
- 位移控制在 ±2px ~ ±6px 之间：太大像抽搐，太小看不出效果
- 加
rotate()是为了模拟物理惯性，但角度必须 ≤ ±1.5deg，否则文字会模糊 - 必须让
0%和100%完全一致（归零），否则动画结束后元素位置偏移，影响后续点击热区 - 别用
infinite——加入购物车是瞬时反馈，单次触发即可，设animation-iteration-count: 1
如何精准控制晃动时机和防连点堆积？
晃动不该在页面加载时自动播，而应由用户操作触发（比如点击按钮后校验失败、库存不足时）。用 CSS 类控制最稳妥：
- 给按钮加基础类：
.add-btn { transition: transform 0.15s; } - 错误时动态加类：
button.classList.add('shake-trigger')，对应样式：.shake-trigger { animation: cart-shake 0.4s cubic-bezier(0.36, 0.61, 0.23, 0.98); } - 动画结束立刻移除类，监听
animationend事件：btn.addEventListener('animationend', () => btn.classList.remove('shake-trigger')) - 移动端要临时禁用交互：
.shake-trigger { pointer-events: none; touch-action: none; }，避免用户连点多次触发多段动画
真正容易被忽略的是：晃动只是反馈层，它不能掩盖逻辑问题。比如库存校验延迟、接口返回慢，光靠晃动只会让用户更焦躁。先确保「加购」动作本身快（本地状态立即更新、接口异步兜底），再叠加这个微动效才有意义。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
