摇摆动画卡顿或不绕中心旋转？检查 transform-origin 和硬件加速
默认情况下，transform 动画绕元素左上角旋转，看起来像“甩出去”而不是自然摇摆。必须显式设为 transform-origin: center（或 50% 50%），否则倾斜角度再准也白搭。
另外，纯 transform + rotate() 在低端设备容易掉帧。加上 will-change: transform 或强制启用 GPU 加速的 transform: translateZ(0) 能明显改善——但别滥用，每个按钮都加会增加图层合成开销。
-
transform-origin必须写在动画触发前的初始样式里，不能只写在@keyframes中 - 如果按钮有边框或阴影，
transform-origin建议用center center而非50% 50%，避免某些浏览器解析偏差 - 慎用
will-change: transform在 hover 状态动态添加——部分 Chrome 版本会引发重排抖动
用 @keyframes 实现物理感摇摆：关键不是角度大，而是节奏不对称
真实物体摇摆衰减快、回弹慢，所以不能用线性或均匀的 ease-in-out。典型做法是让正向倾斜时间短、幅度大，反向回弹时间长、带轻微过冲。
例如一个模拟钟摆效果的摇摆：从 0° → +12°（快）→ 0° → -4°（慢）→ 0°（停），比单纯 0° ↔ ±8° 往返更可信。
立即学习“前端免费学习笔记（深入）”；
- 推荐用
cubic-bezier(0.34, 1.56, 0.64, 1)模拟“弹回”感（注意 y 值 > 1 是允许的，表示过冲） - 动画时长建议 0.6s–0.9s，太短像抽搐，太长像卡顿
- 不要用
infinite无限循环——真实物理摆动必然衰减；加animation-iteration-count: 3更合理
@keyframes sway {
0% { transform: rotate(0deg); }
25% { transform: rotate(12deg); }
50% { transform: rotate(0deg); }
75% { transform: rotate(-4deg); }
100% { transform: rotate(0deg); }
}
hover 触发摇摆时点击失效？事件穿透和过渡冲突要分开处理
常见现象：鼠标移上去开始摇摆，但点一下没反应。本质是 transform 动画期间，浏览器可能延迟响应 pointer events，或者你同时写了 transition 和 animation 导致行为打架。
按钮交互逻辑应明确分层：hover 启动动画，click 响应业务逻辑，二者不共用同一组 CSS 属性控制。
- 摇摆用
animation，点击反馈用独立的:active+transform: scale(0.95)，别混进同一个 keyframes - 确保按钮有
cursor: pointer，且没有父容器设置了pointer-events: none - 如果用了
animation-fill-mode: forwards，记得在动画结束后手动重置transform，否则后续 JSgetBoundingClientRect()可能取到错误位置
移动端触摸摇摆失真？绕开 hover 依赖，改用 :active 或 JS 控制
CSS 的 :hover 在 iOS Safari 和多数安卓浏览器中不可靠——轻触不会触发，长按可能误判为菜单呼出。物理感摇摆若想跨端一致，得放弃纯 CSS hover 方案。
最轻量解法：用 :active 替代 :hover，配合 animation-play-state: running/paused 控制启停；更稳的方案是监听 touchstart，JS 添加 class 触发动画。
-
:active在移动端有效，但持续时间极短（约 100ms），需搭配animation-delay或 JS 延迟启动 - 若用 JS，别直接操作
style.animation，改用 class 切换，方便复用和维护 - 注意 iOS 上
transform动画默认不启用 GPU 加速，务必加transform: translateZ(0)到初始样式
animation-fill-mode: forwards，结果松开鼠标瞬间弹回原形——那点物理错觉就全毁了。 
