在网页开发中，使用css动画可以提升交互体验，但不少人在做位移、缩放或高度变化动画时会遇到页面抖动，根本原因在于动画改变了文档流中元素的几何信息，引发频繁重排。下面我们看看具体原因与应对方式。
为什么css动画会导致页面抖动
当动画修改了会影响布局的属性，例如width、height、margin、top等，浏览器需要重新计算其他元素的位置，这个过程叫做重排。重排会消耗性能，并且在动画的每一帧都发生时，页面就会出现肉眼可见的抖动。
使用transform和opacity避免影响文档流
transform和opacity只触发合成层变化，不会让元素脱离原有占位，也不会引起周围元素的重排。推荐用它们来实现位移和淡入淡出。
/* 不好的写法：修改margin导致重排 */
@keyframes bad {
from { margin-left: 0; }
to { margin-left: 100px; }
}
/* 好的写法：使用transform */
@keyframes good {
from { transform: translateX(0); }
to { transform: translateX(100px); }
}
.box {
animation: good 1s ease infinite;
}
将动画元素脱离文档流
如果必须做尺寸类动画，可以把元素设为position: absolute，这样它的变化就不会挤压其他处于文档流中的元素。
<div class="wrap"> <div class="float-box"></div> <p>其他内容不会被抖动影响</p> </div>
.wrap {
position: relative;
}
.float-box {
position: absolute;
width: 100px;
height: 100px;
background: #39c;
animation: scale 1s infinite alternate;
}
@keyframes scale {
from { transform: scale(1); }
to { transform: scale(1.5); }
}
开启GPU加速减少抖动
通过will-change提前告诉浏览器哪些属性会变化，有助于创建独立图层，减少主线程压力。
.card {
will-change: transform;
transition: transform 0.3s;
}
.card:hover {
transform: translateY(-10px);
}
小结
避免css动画影响文档流的核心是：优先使用transform与opacity，减少重排；必要时让动画元素脱离文档流；合理使用will-change提升渲染效率。这样就能有效解决动画过程中的页面抖动问题。