CSS如何制作元素摆动动画_结合关键帧旋转关键点-css教程-PHP中文网

摆动动画需用@keyframes配合rotate()与transform-origin实现往复小角度转动，关键在50%设最大偏移、首尾归零、ease-in-out缓动、0.8–1.2s时长及合理旋转原点定位。

css如何制作元素摆动动画_结合关键帧旋转关键点

用 `@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）。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

另一个坑是未声明 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 循环是常用需求，如需单次摆动就删掉。

真正难调的其实是角度差和时序比例——同一段代码，在不同字号、行高、设备像素比下，视觉摆幅感受可能差很多。上线前务必在真机上快速扫一眼，别只信开发工具里的预览。