左右摇摆动画需用@keyframes定义三段关键帧（0%/50%/100%），起止位置相同以形成闭环，50%设正向偏移；配合animation: name duration timing-function infinite alternate实现平滑循环晃动。
用 @keyframes 定义左右摇摆的关键帧
摇摆动画本质是让元素在水平方向周期性偏移，回到原位再反向，所以关键帧只需三段：起始（0%）、右偏（50%）、左偏（100%）。注意不能只写 0% 和 100%，否则浏览器会线性插值，失去“停顿感”和自然晃动感。
常见错误是写成 0% { transform: translateX(0); } 100% { transform: translateX(20px); }——这只会单向移动一次，且没返回路径。
-
0%和100%必须设为相同值（如translateX(0)），才能形成循环闭环 -
50%设为正向偏移（如translateX(15px)），反向偏移由动画自动补间完成，无需显式写-15px - 若想更明显“顿挫感”，可加
25%和75%停顿点，但多数摇摆场景用三段足够
用 animation 属性启用并控制摇摆行为
定义好 @keyframes 后，必须通过 animation 属性挂载到元素上。来回摇摆的核心在于 animation-iteration-count: infinite 和 animation-direction: alternate 的组合——前者让动画无限重复，后者让每次循环自动反向播放，避免“弹回原点”的生硬感。
容易忽略的是 animation-timing-function：用 ease-in-out 比 linear 更接近真实晃动的加减速效果；若用 cubic-bezier(.3,1.5,.7,0) 还能模拟弹簧回弹感。
立即学习“前端免费学习笔记（深入）”；
-
animation: shake 0.6s ease-in-out infinite alternate;是最简可用配置 - 避免漏写
infinite，否则只晃一次就停 - 别把
alternate写成reverse——后者是全程反向播放，不是“来回” - 时间太短（
）易眩晕，太长（>1.2s）像卡顿，0.5–0.8s 是较稳妥区间
兼容性与性能注意事项
transform: translateX() 本身是硬件加速属性，只要不同时触发重排（如修改 width 或 left），性能基本无压力。但 IE 10+ 才支持 animation，老版本需加 -webkit- 前缀（Safari 8 及更早、Android 4.3 等）。
- 移动端 Safari 对
transform动画帧率更敏感，建议开启will-change: transform提前提示渲染引擎 - 如果元素有
box-shadow或border-radius，动画中可能模糊，可加backface-visibility: hidden修复 - 别在
:hover中直接写完整animation值——会导致鼠标反复进出时动画重置，应只改animation-play-state
一个可直接复制的摇摆动画示例
以下代码实现平滑、无限、左右自然晃动的按钮：
```css
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(8px); }
50% { transform: translateX(0); }
75% { transform: translateX(-8px); }
}
.shake-btn {
animation: shake 0.7s ease-in-out infinite;
will-change: transform;
}
注意：这里用了四段关键帧增强节奏感，比纯三段更灵动；ease-in-out 让每次偏移起止都放缓，避免机械感。实际项目中，晃动幅度（8px）和时长（0.7s）要根据元素尺寸和设计语境微调——大图标可加大，小文字链接宜减小，否则会显得浮夸。
