[分享]css动画执行时画面一直抖

在 CSS 动画执行时，有时候会出现画面一直抖动的现象，这会影响用户的视觉体验，造成不好的印象。这种抖动现象通常是由于重绘和回流引起的。在动画执行过程中，当元素的样式发生变化，浏览器需要重新计算元素的...

在 CSS 动画执行时，有时候会出现画面一直抖动的现象，这会影响用户的视觉体验，造成不好的印象。

这种抖动现象通常是由于重绘和回流引起的。在动画执行过程中，当元素的样式发生变化，浏览器需要重新计算元素的大小、位置等布局信息（回流），然后再根据新的布局信息进行重新绘制（重绘）。这个过程是比较耗费性能的，尤其是在动画执行时，频繁地进行重绘和回流，就容易引起画面抖动。

/* 以下为引起画面抖动的 CSS 属性 */ 
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); 

上面的 CSS 属性可以让一个元素在页面中居中显示，但是却可能引起画面抖动。因为这些属性会使元素的布局信息发生变化，而在动画执行时会频繁地触发回流和重绘，进而造成画面抖动。

为了避免画面抖动，我们可以采用一些优化方式：

1. 使用 CSS3 动画代替 JavaScript 实现的动画，CSS3 动画利用 GPU 加速进行渲染，性能更高。

2. 尽量避免使用那些重绘和回流频繁触发的 CSS 属性，如上面提到的 position、top、left、transform 等。

3. 尽量减少动画元素的数量，将多个重叠的元素合成一个统一的元素进行动画。

通过以上的优化，可以有效地避免画面抖动的问题，提高用户的视觉体验。