浅谈css动画是否会被js阻塞

深入剖析CSS动画与JavaScript的交互：为何transform动画不受阻塞？

在网页开发中，CSS动画与JavaScript的交互是一个重要的议题。众所周知，CSS的动画部分在某些情况下可能会被JavaScript阻塞，但这其中有一个例外——transform动画。将为您揭示其中的奥妙。

想象一下狼蚁网站SEO优化的场景，有一个元素正在执行margin-left移动的动画。我们启动了一个JavaScript函数kill()，这个函数会阻塞一段时间。在这段阻塞期间，网页上的动画会发生什么呢？

让我们看一段CSS代码：

```css

.walkabout-old-school {

animation: 3s slide-margin linear infinite;

}

@keyframes slide-margin {

from {margin-left: 0;}

50% {margin-left: 100%;}

to {margin-left: 0;}

}

```

这段代码中，元素会进行一个持续的margin-left变化动画。当我们运行JavaScript函数kill()时，这个动画会被阻塞。这是因为改变margin会导致DOM重新布局，而JavaScript的执行会暂停页面的重排。动画会被暂停，直到JavaScript函数执行完毕。

当我们使用transform进行动画时，情况就完全不同了。例如：

```css

.walkabout-new-school {

animation: 3s slide-transform linear infinite;

}

@keyframes slide-transform {

from {transform: translatex(0);}

50% {transform: translatex(300px);}

to {transform: translatex(0);}

}

```

即使JavaScript函数正在运行，使用transform进行的动画也不会被暂停。这是因为transform动画不会触发页面的重排，而只是改变元素的渲染效果。它不会受到JavaScript的影响。

那么，为什么会出现这种情况呢？这是因为浏览器在渲染页面时，对于transform和margin等属性的处理方式不同。改变transform不会触发页面的重排，只会触发复合层的变化，而复合层的更新不会阻塞页面的其他渲染任务。而修改margin则会导致页面重排，这是浏览器渲染过程中的一个昂贵操作，会阻塞其他任务。当JavaScript执行时，它会暂停页面重排，导致依赖于重排的CSS动画被暂停。这就是为什么transform动画不会被JavaScript阻塞的原因。了解这些差异对于我们在开发过程中选择适当的动画方式至关重要。在实际开发中，我们应充分利用transform的优势，以优化页面性能并提升用户体验。希望读者能对此有更深入的理解并运用到实际项目中。