一、浏览器渲染原理
浏览器渲染过程：
- 根据HTML构建HTML树(DOM)
- 根据CSS构建CSS树(CSSOM)
- 将两棵树合并成一颗渲染树(render tree)
- Layout布局(文档流、盒模型、计算大小和位置
- Paint绘制(把边框颜色、文字颜色、阴影等画出来
- Compose合成(根据层叠关系展示画面)
reflow（回流）：
当浏览器发现某个部分发生了点变化影响了布局，需要倒回去重新渲染，这个回退的过程叫 reflow。
reflow 会从 <html> 这个 root frame 开始递归往下，依次计算所有的结点几何尺寸和位置。
repaint（重绘）：
改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性时，屏幕的一部分要重绘，但是元素的几何尺寸没有变。
注意：
- display:none 的节点不会被加入Render Tree，而visibility: hidden 则会，所以，如果某个节点最开始是不显示的，设为display:none是更优的。
- display:none 会触发 reflow，而 visibility:hidden 只会触发 repaint，因为没有发现位置变化。
- 有些情况下，比如修改了元素的样式，浏览器并不会立刻reflow 或 repaint 一次，而是会把这样的操作积攒一批，然后做一次 reflow，这又叫异步 reflow 或增量异步 reflow。但是在有些情况下，比如resize 窗口，改变了页面默认的字体等。对于这些操作，浏览器会马上进行 reflow。）
二、tarnsform介绍
四个常用功能
- 位移translate
- 缩放scale
- 旋转rotate
- 倾斜skew 一般都需要配合transition过渡
inline元素不支持transform,需要先变成block
三、transition过渡
transition直译为过渡，即给属性变化添加过渡效果
作用：补充中间帧
语法：
- transition:属性名 时长 过渡方式 延迟
- transition: left 200ms linear
- 可以用逗号分隔两个不同属性
- transition: left 200ms, top 400ms
- 可以用all代表所有属性 transition: all 200ms
- 过渡方式有:
- linear | ease | ease-in |ease-out | ease-in-out | cubic-bezier | step-start | step-end steps。
- transition 可以同时给多个属性添加过渡效果，比如可以在移动元素的同时，改变其透明度。但不管有多少个属性同时在变化，这种过渡效果只能是一次性的，也就是单个动作。
四、animation
transition 只能做单个动作，如果动画包含多个动作，这时候就需要 animation
两个连续的线段有三个关键点，两个连续的动作必然也有三个关键帧（keyframe）。
@keyframe 语法：
@keyframe <identifier> {
from {
<cssKey>: <xxx>
}
to {
<cssKey>: <xxx>
}
}
animation 语法
animation:时长|过渡方式|延迟|次数|方向|填充模式|是否暂停 |动画名;
- 时长: 1s或者1000ms
- 过渡方式:跟transition取值一样，如linear
- 次数: 3或者2.4或者infinite
- 方向:reverse | alternate alternate-reverse
- 填充模式: none | forwards | backwards | both
- 是否暂停: paused | running
- 动画名 @keyframe 的
<identifier>以上所有属性都有对应的单独属性
