摆动动画需用@keyframes配合rotate()与transform-origin实现往复小角度转动，关键在50%设最大偏移、首尾归零、ease-in-out缓动、0.8–1.2s时长及合理旋转原点定位。
用 @keyframes 实现摆动动画的核心逻辑
摆动不是匀速旋转，而是围绕某个轴（通常是中心或底部）做小角度往复转动，关键在于控制旋转方向和缓动节奏。直接用 transform: rotate() 线性变化会显得生硬，必须配合 ease-in-out 或自定义贝塞尔曲线，并限制角度范围（一般 ±5° 到 ±12° 之间较自然）。
常见错误是把 rotate(0deg) 放在 0% 和 100% 都设成同值，导致动画不触发；或者角度跨度过大（如 rotate(-30deg) → rotate(30deg)），看起来像翻跟头而非摆动。
- 起始帧（0%）设为
rotate(0deg) - 中间帧（50%）设为最大偏移，如
rotate(-8deg) - 结束帧（100%）回到
rotate(0deg)，形成闭环 - 动画时长建议 0.8s–1.2s，过短突兀，过长拖沓
transform-origin 决定摆动支点位置
摆动的“真实感”取决于旋转原点。默认 transform-origin: 50% 50% 是绕中心转，适合钟摆式左右晃；若想模拟悬挂物（如吊牌、旗帜），得把原点压到底部：transform-origin: center bottom 或具体像素值如 transform-origin: 50% 100%。
容易忽略的是：当元素有 margin 或父容器 overflow: hidden 时，transform-origin 的坐标是相对于元素自身盒模型，不是视口。调试时可临时加 outline: 1px solid red 看实际旋转中心。
立即学习“前端免费学习笔记（深入）”；
- 顶部固定摆动（如门扇）→
transform-origin: center top - 底部悬挂摆动（如风铃）→
transform-origin: center bottom - 左端铰链摆动（如翻页）→
transform-origin: left center - 避免用百分比混搭单位，如
transform-origin: 50% 20px在部分旧浏览器中行为不一致
防止动画卡顿和布局抖动的实操要点
CSS 动画卡顿常因触发重排（reflow）。摆动若涉及 width/height 变化或影响其他元素流式布局，GPU 加速会失效。必须确保只使用可合成属性（transform 和 opacity）。
另一个坑是未声明 will-change: transform —— 虽非必需，但在复杂页面中对首帧渲染有帮助；但别滥用，否则可能增加内存开销。
- 动画元素加
backface-visibility: hidden强制开启 GPU 层 - 禁用
top/left位移做“摆动”，那会强制重排 - 避免在
@keyframes中混用scale()或translate()，除非明确需要复合效果 - 移动端需加
-webkit-transform前缀兼容 iOS Safari 12 及更早版本
一个可用的最小摆动动画代码片段
```css
@keyframes swing {
0% { transform: rotate(0deg); }
25% { transform: rotate(-6deg); }
50% { transform: rotate(0deg); }
75% { transform: rotate(6deg); }
100% { transform: rotate(0deg); }
}
<p>.swing-element {
display: inline-block;
transform-origin: center bottom;
animation: swing 1s ease-in-out infinite;
backface-visibility: hidden;
}</p><pre class='brush:language-;toolbar:false;'>
注意：这里用了 5 帧而非 3 帧，让回弹更柔和；ease-in-out 让加速/减速自然；infinite 循环是常用需求，如需单次摆动就删掉。
真正难调的其实是角度差和时序比例——同一段代码，在不同字号、行高、设备像素比下，视觉摆幅感受可能差很多。上线前务必在真机上快速扫一眼，别只信开发工具里的预览。
