浏览器渲染原理
步骤：
- 根据HTML构建HTML树（DOM）
- 根据CSS构建CSS树（CSSDOM）
- 将两棵树合并成一颗渲染树（render tree）
- Layout布局（文档流、盒模型、计算大小和位置）
- Paint绘制（把边框颜色、文字颜色、阴影等画出来）
- Compose合成（根据层叠关系展示画面）
transform
四个常用功能：
- 位移 translate
- 缩放 scale
- 旋转 rotate
- 倾斜 skew
tips：
- 一般需要配合transition过渡
- inline元素不支持transform，需先变成block
transition过渡
作用：补充中间帧
语法：
- transition:属性名 时长 过渡方式 延迟
- transition：left 200ms linear
- 可以用逗号分割两个不同属性
- 可以用all代替所有属性
过渡方式：
- liner-匀速
- ease-从快到慢
- ease-in-从慢到快
- ease-out-从快到慢（比ease慢）
- ease-in-out-从慢-快-慢
animation
作用：中间加关键帧
语法：
- animation：时长|过渡的方式|延迟|次数方向|填充模式|是否暂停|动画名
- 时长：1s或1000ms
- 过渡方式：跟transition取值一样
- 次数：3或2.4或infinite
- 方向：reverse|alternate
- 填充模式：none|forwards
- 是否暂停：paused|running
