左右摇摆动画需用@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) 还能模拟弹簧回弹感。
立即学习“前端免费学习笔记（深入）”；
