实现一个动画

有三种实现方式，我们将首先分别介绍三种方式，之后会根据浏览器渲染原理分析哪种方式最好

1. 通过设定 position 及 left、top 等

2. 通过 transform + transition

3. 用 animation

其实还是用的 transform 实现的，只不过可以在别处独立声明，多次使用

关于transition的总结

有一些属性不能用transition

• 比如 display: block 变成 display: none

关于animation的总结

animation组成部分

1. 关键帧 keyframes
2. animation 属性

因为我们可以在任意一个点指定关键帧，所以animation可以用来做更复杂的动画

浏览器渲染原理

浏览器渲染的过程：

1. 根据HTML标记并构建DOM树
2. 根据CSS构建CSS树（CSSOM）
3. 将两棵树合并成一棵渲染树（render tree
4. layout布局（文档流，盒模型，计算大小或位置等）
5. paint绘制（边框颜色，背景颜色，阴影等绘制）
6. compose合成（根据层叠关系展示画面）

Snipaste_2020-10-18_14-26-01.png