本文原文地址CSS动画渲染的过程分为三个步骤：布局绘制合成布局浏览器首先会计算每个元素在屏幕上占据了多少空间。所以在这个“布局”的过程中，跟元素的宽、高、位置有很大的关系。任何时候，只要改变元素的宽高，或者改变元素属性[top/left]，浏览器就会重新计算元素布局。即使使用JavaScript在DOM中添加或删除元素，也会导致浏览器重新计算元素的布局，浏览器必须重新渲染页面。绘图的过程是填充像素：绘制文本、给图片着色、边框和阴影。绘图过程发生在内存中，页面的各个部分形成许多层。如果你修改了一个元素的背景颜色，浏览器会重新绘制它。合成浏览器将所有绘制的图层提取为屏幕图像。当opacity和transform属性的值发生变化时，元素的渲染时间非常少。这时，浏览器会将元素提升到自己的绘图层，并使用GPU[计算机图形处理器]进行加速。因为元素是保存在浏览器自己的绘图层中的，所以在整个图片变化过程中，主层不会发生变化，也不需要重绘。
