浏览器渲染原理
浏览器渲染大致有以下几个过程：
- 根据HTML构建HTML树（DOM）
- 根据CSS构建CSS树（CSSOM）
- HTML树和CSS树组合成一个渲染树（render tree）
- Layout布局 ,包括文档流、盒模型、大小、位置等
- Paint绘制，包括边框颜色、文字颜色、阴影等
- Composite合成，根据层叠关系展示画面
在更新样式的时候，浏览器是否完全按照以上六个步骤进行渲染呢？
并不一定
在更新样式的时候，还有可能省略掉layout，或者省略掉layout和paint。
那么如何查看是否省略掉其中的paint步骤？
我们可以在chrome浏览器中打开开发者工具 --> 按ESC --> 弹出的窗口，左边有三个小点，点击 --> 选择Rendering -> 勾选Paint flashing -> 接下来样式改变的时候，如果哪个地方变绿，就说明哪里被重新渲染了，没有变绿就没有被重新渲染
CSS动画的两种做法 transition 和 animation
transition过渡
transition 属性是 transition-property，transition-duration，transition-timing-function和 transition-delay 的一个简写属性。
transition-property：指定应用过渡属性的名称
transition-duration：以秒或毫秒为单位指定过渡动画所需的时间。默认值为 0s ，表示不出现过渡动画
transition-timing-function： 动画速度的曲线，可以取的值有ease(默认)、linear、ease-in、ease-out、ease-in-out、以及贝塞尔曲线等
transition-delay：动画的延迟时间，即就是多长时间后开始动画
注意：使用transition的时候，要注意transition-duration和transition-delay的顺序，duration要放在delay前面。
animation动画
animation 属性是 animation-name，animation-duration, animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode 和 animation-play-state 属性的一个简写属性形式
animation-name：动画的名称，自定义就好
animation-duration：动画持续时间，跟transition类似
animation-timing-function：动画速度曲线，跟transition中类似
animation-delay：延迟事件
animation-iteration-count： 动画的运行次数，无限次是infinite
animation-direction: 动画是否反向运动，常用的是alternate（动画交替运行）
animation-fill-mode：动画结束时的位置，forwards停到动画结束的位置
animation-play-state： 定义一个动画是否运行或者暂停
animation通常和keyframes搭配使用
- 可以通过from to的形式
@keyframes name{
from{
动画开始的样式
}
to{
动画结束的样式
}
}
- 也可以通过百分比的形式
@keyframes name{
0%{
动画开始的样式
}
50%｛
动画中间的样式
｝
100%{
动画结束的样式
}
}
