CSS动画
一、浏览器渲染
1.渲染原理
参照文章：
①根据HTML构建HTML树（DOM）
②根据CSS构建CSS树（CSSDOM）````
③将两棵树合并成一棵树（rendertree）
④layout 布局（文档流、盒模型、计算大小和位置）
⑤paint 绘制（边框颜色、文字、阴影）
⑥compose 合成（根据层叠关系展示画面）
2.更新样式的三种方法
1.第一种方式
布局、绘制、合成全部流程走一遍
2.第二种方式
只有绘制与合成步骤
3.第三种方式
transform 就好比插入头尾关键帧，中间动画自动补全，对比left()方式形成位移动画，transform只渲染2次。
CSS动画优化
- 第一种答案在这里 使用transform来实现动画效果
- 第二种就是JS优化
随便说两个就是：
- 第三种就是CSS优化
2、CSS 动画的两种做法（transition 和 animation）
1.使用transform实现跳动的心
- 鼠标移动到心上会自己变大
2.使用animation实现颜色改变并跳动的心
注意事项：
- @keyframes中的@别忘加
- 如果使用alternate（交替），重复次数至少2次。
- 0% 50% 与动画完成时间相关
\
