实现一个动画，有三种实现方式，我们将首先分别介绍三种方式，之后会根据浏览器渲染原理分析哪种方式最好
1. 通过设定 position 及 left、top 等
2. 通过 transform + transition
3. 用 animation
其实还是用的 transform 实现的，只不过可以在别处独立声明，多次使用
关于transition的总结
有一些属性不能用transition
- 比如
display: block变成display: none
关于animation的总结
animation组成部分
- 关键帧
keyframes - animation 属性
因为我们可以在任意一个点指定关键帧，所以animation可以用来做更复杂的动画
浏览器渲染原理
浏览器渲染的过程：
- 根据HTML标记并构建DOM树
- 根据CSS构建CSS树（CSSOM）
- 将两棵树合并成一棵渲染树（render tree）
- layout布局（文档流，盒模型，计算大小或位置等）
- paint绘制（边框颜色，背景颜色，阴影等绘制）
- compose合成（根据层叠关系展示画面）
Snipaste_2020-10-18_14-26-01.png
