浏览器渲染原理
-
浏览器向服务器请求到了HTML文档后便开始解析，产物是DOM，如果有CSS，会根据CSS生成CSS对象模型，然后再由DOM和CSSDOM合并产生渲染树，知道了所有节点的样式，便根据这些节点以及样式计算他们在浏览器中确切的大小和位置，这就是布局，最后再把节点绘制到浏览器上。
-
解析HTML构建dom树，解析css构建css树----构建render树----布局render树----绘制render树
css动画
在研究CSS动画的过程中，需要先了解如何让一个元素变成我们希望的形状及可以移动位置。这时就需要我们使用到transform，其主要有translate位移、scale缩放、rotate旋转以及skew倾斜四个属性。主要有translate和animation。
transform
translate：
-
translateX（）沿X轴平移；
-
translateY（）沿Y轴平移；
-
translateZ（）沿Z轴平移；
-
translate（x,y）移动至（x，y）；
-
translate3d（x,y,z）三维空间内移动，一般比较少用到；
-
translate（-50%，-50%）可以实现绝对定位元素居中，但是要注意需要与
left:50%;top:50%;结合使用。 接下来是scale： -
scaleX 横向缩放（方向上的border也会缩放）；
-
scaleY 纵向缩放（方向上的border也会缩放）；
-
scale（x,y）整体缩放；
第三点是rotate：
- rotate([<角度>|<0>]);
- rotateX（～）；
- rotateY（～）；
- rotateZ（～）；
最后是skew：
- skewX([<角度>|<0>]);
- skewY([<角度>|<0>]);
- skew（x，y）；（这个用的比较少）
animation
使用animation，就可以实现只补充关键帧的情况下进行多动画的合并。具体的语法如下：
@keyframes XXX {
0%{}
66.66%{}
100%{}
}
即先声明关键帧，然后再添加声明：
animation: 时长｜过渡方式｜延迟｜次数｜方向｜填充模式｜是否暂停｜动画名；
总结
css动画这块还是要多动手去写去尝试，光看文档是没用的。