1.浏览器渲染过程：
- 解析HTML生成DOM树。
- 解析CSS生成CSSOM规则树。
- 将DOM树与CSSOM规则树合并在一起生成渲染树（render tree）。
- 遍历渲染树开始布局(Layout)，对渲染树的每个节点进行布局处理，确定其在屏幕上的显示位置。
- 将渲染树每个节点绘制(Paint)到屏幕。
- 合成（Compose），根据层叠关系展示页面。
2.重绘(repaint)：
- 改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性时，屏幕的一部分要重画，但是元素的几何尺寸没有变。
- 每次重绘后浏览器还需要合并渲染层并输出到屏幕上，大大降低性能。
- 使用transform(变形)没有重绘这一步骤，可提高性能。
3.transform(变形):应用于元素的2D或3D转换。这个属性允许你将元素移动（translate），缩放（scale），旋转（rotate），倾斜（skew）等。下面是他的常用值：
- translate：translate3d(x,y,z)、 translateX(x)、translateY(y)、translateZ(z)、translate(x,y)。参数x表示元素在x轴方向上的移动距离，参数y表示元素在y轴方向上的移动距离，两者的单位可以为px、em和百分比等。
- scale:scaleX()、scaleY()、scale()。参数x表示元素在x轴方向的缩放倍数，参数y表示元素在y轴方向的缩放倍数。当x或y取值为0~1之间时，元素进行缩小；当x或y取值大于1时，元素进行放大。
- rotate：rotate3d(x,y,z,angle)、rotateX(angle)、rotateY(angle)、rotateZ(angle)。表示以那个轴发生旋转。
- skew:skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。
4.animation(动画),以下列出几个属性常用标签
- animation-name ：指定要绑定到选择器的关键帧的名称；
- animation-duration ：动画指定需要多少秒或毫秒完成；
- animation-timing-function ：设置动画将如何完成一个周期（linear 动画从头到尾的速度是相同的；ease动画以低速开始，然后加快，在结束前变慢。）；
- animation-delay ：设置动画在启动前的延迟间隔；
- animation-iteration-count：定义动画的播放次数（infinite无限次）；
#heart{
animation: heart 1s infinite alternate;
}
@keyframes heart{
0%{
transform:scale(1.0);
}
100%{
transform: scale(1.5);
}
}
5.transition(过度)：
- transition-property ：指定CSS属性的name，transition效果，如width,height,all(全部属性)；
- transition-duration：transition效果需要指定多少秒或毫秒才能完成；
- transition-timing-function ：指定transition效果的转速曲线；
- transition-delay ：定义transition效果开始的时间；
