CSS 动画会不会被 JS 阻塞？

Question

我写了一个示例，里面有两个 CSS 动画。一个是用 transform 实现，一个是用 left 实现。

当我执行示例里的 kill 函数时，transform 实现的动画不会被阻塞，left 实现的动画会被阻塞。

我感觉是和使用 left 需要重新计算布局有关。可是这又和 JS 有什么关系呢？浏览器究竟是怎么处理的？

http://codepen.io/tanbowensg/...

Answer 1

答案是有时会，有时不会。首先JS线程是运行在UI线程里大家都知道。如果JS让线程阻塞了按理说CSS动画也会阻塞住，但是因为现代浏览器的优化，很多CSS动画使用了GPU加速。这种技术叫做Off main thread animation，transfrom属性就是其中之一这里有一些介绍。