css动画在循环播放时突然出现卡顿，绝大多数情况是因为动画关键帧里动了会触发重排的布局属性。浏览器在每一帧都要重新计算元素几何信息，主线程被占满，画面就会掉帧。理解渲染流程并改用合适属性，才能彻底解决这类问题。
为什么修改布局属性会让动画卡顿
浏览器渲染一个页面大致分为样式计算、布局、绘制、合成几个阶段。像 width、top、margin 这类几何属性一旦在动画中被改变，就会强制浏览器走完布局阶段，也就是重排。循环动画每秒要跑几十帧，频繁重排会直接拖垮性能。
常见会触发重排的属性
- width、height
- margin、padding
- top、left、right、bottom
- display、float
用 transform 和 opacity 替代布局属性
transform 和 opacity 只影响合成阶段，不会触发重排和重绘，由 GPU 直接处理，是做循环动画最稳的选择。下面这个例子用 left 做循环移动，会卡顿：
/* 不推荐：修改布局属性 left */
@keyframes move-bad {
from { left: 0; }
to { left: 200px; }
}
.box-bad {
position: relative;
left: 0;
animation: move-bad 2s linear infinite;
}
改成 transform: translateX 之后，浏览器只需在合成层移位，循环过程非常顺滑：
/* 推荐：只改 transform */
@keyframes move-good {
from { transform: translateX(0); }
to { transform: translateX(200px); }
}
.box-good {
animation: move-good 2s linear infinite;
}
其他避免卡顿的实操建议
1. 提前提层减少重绘
对需要复杂动画的元素加 will-change: transform，提示浏览器单独提层，但不要在太多元素上滥用。
.box-good {
will-change: transform;
animation: move-good 2s linear infinite;
}
2. 别在动画里读布局信息
在 JS 驱动的动画帧中，避免调用 offsetWidth 等会强制同步布局的接口，防止无谓回流。
3. 控制动画元素层级与数量
循环动画元素不宜嵌套过深，也不要同屏大量跑复杂动画，否则合成压力也会带来掉帧。
快速对照表
| 动画做法 | 是否触发重排 | 流畅度 |
|---|---|---|
| 修改 width / left | 是 | 差 |
| 修改 transform | 否 | 好 |
| 修改 opacity | 否 | 好 |
总结来说，css动画循环卡顿的核心解法就是不在关键帧里碰布局属性，统一用 transform 和 opacity 表达运动与显隐，必要时配合 will-change 提层，就能让循环动画稳定流畅。