浏览器渲染原理

浏览器渲染一共有5步骤；

1. 处理 HTML 并构建 DOM 树。
2. 处理 CSS构建 CSSOM 树。
3. 将 DOM 与 CSSOM 合并成一个渲染树
4. 根据渲染树来布局，计算每个节点的位置。
5. 调用 GPU 绘制，合成图层，显示在屏幕上

CSS动画的两种做法（transition和animation）

第一种：transition 过渡
第二种：animation 动画（推荐）
transition（过渡）
作用：补充中间帧
语法：transition：属性名|时长|过渡方式|延迟
transition：lefet 200ms liner
可以用逗号隔开两个不同的属性：
transition：left 200ms，top 400ms
可以用all代表所有属性： transition:all 200ms
过渡方式：liner|ease|ease-in|ease-out|
常用的有：
liner线性
ease缓动，动画开始逐渐加速，中间逐渐缓慢，结束逐渐加速
ease-in-out：开始缓慢，中间加速，结束减慢

animation

用法：声明关键帧添加动画
语法：@keyframes动画名{}
标准写法：
@keyframes动画名{
from{
transform:translateX(0%);
}
to{
transform:translateX(100%)；
}
}
语法：
animation:动画名|时长|过渡方式|延迟|次数|方向|

加油继续学