浏览器渲染原理
根据HTML构建HTML树（DOM）
根据CSS构建CSS树（CSSOM）
将两棵树合成一棵树进行渲染（render tree）
Layout布局（文档流、盒模型、计算大小和位置）
Paint绘制（把边框颜色、文字颜色、阴影等画出来）
Compose合成（根据层叠关系展示画面）
CSS动画的两种做法（transition 和 animation）
1.0 transition（过渡）
作用：补充中间帧，会自动把中间帧补齐，可以用来做简单的小动画。 如html里面对一个span标签设置以下css：
span {
display: inline-block;
margin: 200px;
width: 50px;
height: 50px;
background: red;
transition: all 1s;
}
span:hover {
transform: scale(1.2);
}
transition属性有四个值:
transition:width 1s linear 0s;
第一个过度什么就写什么
第二个是过渡的时长
第三个是以怎样的形式过度：比如很快还是很慢ease、ease-in
第四个是延迟过度，等几秒钟再动的意思
但是并不是所有属性都能过渡
2.0 animation（动画）
作用：制作动画
animation要配合@keyframes使用才能完成一个小动画
@keyframes用来定义动画
animation是来调用动画的，不调用动画还不能使用 animation: heart 3s alternate infinite; animation可以有多个值 第一对应的是动画的名字 第二个是动画时长 第三个是以怎样的形式过度：比如很快还是很慢ease、ease-in 第四个是延迟时间 后面还可以加alternate（轮流）和forwards（停在结束状态）以及infinite（无限循环动画）
.heart {
display: inline-block;
margin: 300px;
position: relative;
animation: heart 3s alternate infinite;
}
@keyframes heart {
from {
transform: scale(0);
}
to {
transform: scale(1.5);
}
}
transition 和 animation的区别：
transition 需要触发条件，不能在页面加载时自动发生
transition 默认只能执行一次，再次执行需要再次触发
transition 只有开始和结束两个状态，不能设置中间的状态
animation 在页面加载时自动执行，并且可以像flash动画一样设置中间的关键帧
