CSS动画卡顿主因是重排与重绘，应优先使用transform和opacity等仅触发布局合成的属性；避免top/left等引发重排的属性；慎用will-change和translateZ(0)启用硬件加速；禁止动画中读写布局属性；控制并发动画数量并适配prefers-reduced-motion。
CSS动画卡顿，多数是因为触发了浏览器的重排（reflow）和重绘（repaint），尤其是当动画属性影响布局时。要让动画流畅，核心是避开会触发布局计算的属性，优先使用只影响合成层（compositor layer）的属性，比如 transform 和 opacity。
用 transform 替代 top/left/margin 等位移属性
改变 top、left、width、height 或 margin 会强制浏览器重新计算元素位置和周围布局，引发重排，性能开销大。
- ❌ 不推荐：
animation: slide 1s; @keyframes slide { to { left: 100px; } } - ✅ 推荐：
@keyframes slide { to { transform: translateX(100px); } }
transform 不影响文档流，浏览器可将其交由 GPU 合成处理，基本不触发重排。
为动画元素启用硬件加速（谨慎使用）
给元素添加 transform: translateZ(0) 或 will-change: transform 可主动提升为独立合成层，减少与其他图层的混合开销。
立即学习“前端免费学习笔记（深入）”；
- 适用场景：频繁动画的元素（如轮播图、滑动菜单）
- ⚠️ 注意：滥用会导致内存占用上升、纹理过多，反而降低性能；建议仅对确需优化的元素添加，且动画结束后可移除
will-change - 示例：
.animating { will-change: transform; }（动画开始前加，结束时用 JS 移除）
避免在动画中读写布局相关属性
JS 中读取 offsetTop、getBoundingClientRect()、clientWidth 等会强制同步触发重排，若夹在动画帧中（如 requestAnimationFrame 里反复读写），极易导致掉帧。
- 把布局读取操作集中做、提前做，或用
ResizeObserver/IntersectionObserver替代高频轮询 - 动画中只做纯样式写入（如
element.style.transform = ...），避免“读-写-读-写”模式
控制动画层级与数量
大量并发动画（尤其在中低端设备）仍可能压垮合成器。可通过以下方式缓解：
- 限制同时运行的动画元素数量（例如列表滚动时暂停非可视区动画）
- 用
prefers-reduced-motion媒体查询降级动画：@media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; } } - 复杂交互动画考虑用轻量库（如 anime.js）做时间轴调度，而非堆叠多个 CSS 动画
