浏览器渲染过程
步骤：
- 根据 HTML 构建 HTML 树 (DOM)
- 根据 CSS 构建 CSS 树 (CSSOM)
- 将两棵树合并成一棵渲染树 (render tree)
- Layout 布局（文档流、盒模型、计算大小和位置）
- Paint 绘制（把边框颜色、文字颜色、阴影等画出来）
- Compose 合成（根据层叠关系展示画面）
CSS 动画之 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
示例：
/* property name | duration | timing function | delay */
transition: margin-right 4s ease-in-out 1s;
CSS 动画之 animation
缩写语法：
animation: 时长 | 过渡方式 | 延迟 | 次数 | 方向 | 填充模式 | 是否暂停 | 动画名;
- 时长：1s 或者 1000ms
- 过渡方式： 跟 transition 取值一样，如 linear
- 次数： 3 或者 2.4 或者 infinite
- 方向： reverse | alternate | alternate-reverse
- 填充模式：none | forwards | backwards | both
- 是否暂停： paused | running
- 以上所有属性都有对应的单独属性
示例：
/* @keyframes duration | timing-function | delay |
iteration-count | direction | fill-mode | play-state | name */
animation: 3s ease-in 1s 2 reverse both paused slidein;
参考资料
