CSS3 之 animation调试中的现象

最近工作中用到了 css3 中的 animation. 代码是这样的

this._container.style.transform = `translateX(-${distance}px)`;
this._container.style.transitionDuration = `${Math.round(
      1000 * duration
)}ms`;
this._container.style.transitionTimingFunction = 'linear';

发现一个有趣的现象是: 在第一行断点, 动画不进行. 在第二行断点, div会没有过渡效果, 直接transform到最终位置. 在第三行断点. 发现的是滚动效果不是线性

结论: 断点并不能中断浏览器的渲染线程, 因为css3的animation用的是额外的线程