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属性就是其中之一

这里有一些介绍。

Answer 2

没仔细考虑，不过transform用的是图形加速性能会快些，而left不是而且在页面过渡时容易卡顿

Answer 3

好不夸张的说我用眼睛看都知道1,2的动画方案，看源码果真如此

Answer 4

我觉得大概是left的改变触发了reflow，而transform仅仅是repaint