浏览器的渲染原理
渲染过程大致是这样的：根据HTML构建HTML树->根据CSS构建CSS树->将两棵树合并渲染成一棵树->Layout布局（文档流、盒模型、计算大小和位置）->Paint绘制（边框颜色，文字颜色、阴影等画出来）->Compose合成（根据层叠关系展示画面）
css动画的两种做法
1.transform
CSStransform属性允许你旋转，缩放，倾斜或平移给定元素。这是通过修改CSS视觉格式化模型的坐标空间来实现的。
transform: translate(120px, 50%); 位移
transform: scale(2, 0.5); 缩放
transform: rotate(0.5turn); 旋转
transform: skew(30deg, 20deg); 倾斜更多效果和语法可参考 MDN（transform）
2.transition(过渡)
transition CSS 属性是 transition-property，transition-duration，transition-timing-function 和 transition-delay 的一个简写属性。
语法 transition:属性名 时长 过渡方式 延迟（两种属性公用的话可以在属性之间加逗号，也可以用all代表所以属性）
更多效果和语法可参考 MDN（transition）
transition: margin-right 2s;
transition: margin-right 2s .5s;
transition: margin-right 2s ease-in-out;
transition: margin-right 2s ease-in-out .5s;
transition: margin-right 2s, color 1s;
transition: all 1s ease-out;
总结：动画效果的样式非常多，学习过程中只需要记好常用的，在有需要做一些比较少见的效果的时候再看文档，看了语法之后就可以用了，这样比较节省学习时间。
