浏览器渲染原理
CSS动画的两种做法
浏览器渲染原理:
- 根据 HTML 构建 HTML 树 （DOM）
- 根据 CSS 构建 CSS 树 （CSSOM）
- 将两棵树合并成一棵渲染树（render tree）
- Layout 布局（文档流、盒模型、计算大小和位置）
- Paint 绘制（把边框颜色、文字颜色，阴影等画出来）
- Compose 合成（根据层叠关系展示画面）
CSS动画的两种做法:
- transition
在给定的持续时间内平滑地更改属性值（从一个值到另一个值），也就是只需要指定开始与结束的参数，参数改变时就触发动画。 常用语鼠标事件（:hover、active、:focus、:click）或键盘输入时触发 需要事件触发，无法在网页加载时自动发生。一次性，不能重复发生，除非一再触发。 只能定义开始状态和结束状态，不能定义中间状态 - animation
可以自行写动画开始、进行间、结束时各阶段的变化，适合用来做较细微的动画表现。需要明确的指定关键帧（@keyframe）的参数。 网页加载时会直接执行，可以自行控制各阶段动画的变化
