为什么设置动画 translateX 比 left 更流畅？

提问

被问到怎么设置一个从左到右的动画？我回答了设置 key-frame 的动画名，加上 from 和 to 去设置 left 属性的变化。

追问设置 left 是最好的选择吗？有更快更流畅的方案吗？我回答了 translateX。

然为什么 transform: translateX() 比 left 更流畅？我讲不出所以然来，只记得有这么个结论。

解答

查资料发现原来是设置 left 属性会频繁的造成浏览器回流重排，而 transform 和 opacity 属性不会，因为它是作为合成图层发送到 GPU 上，由显卡执行的渲染，这样做的优化如下

可以通过亚像素精度得到一个运行在特殊优化过的单位图形任务上的平滑动画,并且运行非常快。
动画不再绑定到 CPU 重排，而是通过 GPU 合成图像。即使运行一个非常复杂的 JavaScript 任务，动画仍然会很快运行。

合成图层

所谓合成就是将页面的已绘制部分放在一起在屏幕上显示的过程。

我们举个例子，若以 left 作为动画的属性值，动画的过程是这样的，下面的例子和图片出自这样使用 GPU 渲染 CSS 动画

<style>
    #a, #b {
        position: absolute;
    }

    #a {
        left: 10px;
        top: 10px;
        z-index: 2;
        animation: move 1s linear;
    }

    #b {
        left: 50px;
        top: 50px;
        z-index: 1;
    }

    @keyframes move {
        from { left: 30px; }
        to { left: 100px; }
    }
</style>

<div id="#a">A</div>
<div id="#b">B</div>

那么以 transform 作为动画的话

<style>
    #a, #b {
        position: absolute;
    }

    #a {
        left: 10px;
        top: 10px;
        z-index: 2;
    }

    #b {
        left: 50px;
        top: 50px;
        z-index: 1;
        animation: move 1s linear;
    }

    @keyframes move {
        from { transform: translateX(0); }
        to { transform: translateX(70px); }
    }
</style>

<div id="#a">A</div>
<div id="#b">B</div>