CSS动画抖动主因是使用left、width等触发布局计算的属性，应改用transform和opacity；避免混用布局与合成属性，慎用will-change，注意父容器overflow和contain设置。
为什么 CSS 动画会让页面抖动
抖动本质是浏览器在动画帧之间反复重排（reflow）或重绘（repaint），尤其当动画属性触发布局计算时——比如 width、height、top、left、margin 这类影响几何尺寸或位置的属性。它们迫使浏览器每次动画帧都重新计算元素在文档流中的位置和大小，进而波及周围元素，造成视觉跳动。
用 transform 和 opacity 替代布局属性
这两个属性被浏览器优化为合成层（compositor layer）操作，不触发布局和绘制，只走 GPU 合成管线，性能高且稳定。只要动画只涉及它们，抖动基本消失。
- 把
left: 100px改成transform: translateX(100px) - 把
opacity: 0保留（它本身已是安全属性） - 避免混用：不要同时写
left和transform，后者会覆盖前者，但浏览器仍可能因样式冲突触发额外计算
/* ❌ 抖动风险高 */
.element {
animation: slide-left 0.3s;
}
@keyframes slide-left {
from { left: 0; }
to { left: 200px; }
}
<p>/<em> ✅ 推荐写法 </em>/
.element {
animation: slide-x 0.3s;
}
@keyframes slide-x {
from { transform: translateX(0); }
to { transform: translateX(200px); }
}强制开启硬件加速但别滥用 will-change
transform 和 opacity 通常自动触发 GPU 加速，但某些旧版 Safari 或复杂嵌套下仍可能退回到 CPU 渲染。此时可加 will-change: transform 提前提示，但注意：
- 只对**明确要动画的元素**设置，不能全局加在 body 上
- 动画开始前设置，结束后建议移除（用 JS 控制），否则长期占用内存和图层资源
- Chrome 98+ 对
will-change的过度使用会发出 warning，且可能反而降低性能
确保父容器不意外触发 contain 或 overflow 问题
抖动有时不是动画本身的问题，而是父级容器限制了渲染行为：
立即学习“前端免费学习笔记（深入）”；
- 避免给动画元素的父级设
overflow: hidden且子元素用transform移出边界——某些浏览器会因此强制重绘整个父容器 - 慎用
contain: layout paint，它虽能隔离重排，但若动画元素需和外部交互（如 hover、focus），可能造成样式断裂或事件响应延迟 - 检查是否有未重置的
box-sizing或border，导致transform锚点偏移，视觉上像“抖”
真正稳定的动画，往往不是靠堆参数，而是从一开始避开文档流变更。最常被忽略的一点：哪怕只在一个关键帧里写了 margin-top: 2px，整条动画链就退回低效路径。
