浏览器渲染过程

1. 根据html代码构建html树（DOM）
2. 根据css代码构建css树（CSSOM）
3. 将DOM与CSSOM合成一棵树（render tree）
4. layout布局（例如：文档流，盒模型，大小位置等）
5. paint绘制（将边框颜色，文字颜色，阴影等绘制出来）
6. composite合成（根据层级关系展示画面）

更新方式

我们可以通过csstriggers查看各个属性在不同浏览器下的更新方式。

绘制动画

1. transform

transform的4个常用功能：

* translate 位移

.div{
  transform:tranlatex()
}

可自行设置x，y轴 若要实现z轴位移，需要加上

.div{
  transform:tranlatex()
}

可缩写为

.div{
  transform:tranlate(x,y,z)
}

绝对居中：

.div{
  position: absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}

* scale 缩放

.div{
  transform:scale(1.5);
}

可自行设置x y轴

* rotate 旋转

.div{
  transform:rotate(45deg);
}

* skew 倾斜

.div{
  transform:skew(45deg);
}

2. transition

作用：补充中间帧

• 属性：可过度height/width/all等
• 时长：可自行设置时长
• 过渡方式：linear/ease-in/ease-out/ease-in-out等
• 延迟：可自行设置延迟时间

注意：从block => none 时，不会有过渡动画，我们常用visibility:hidden => visible 代替

3. animation

• keyframes语法：百分数/from to
• animation缩写语法：animation(all 时长 过渡方式 延迟 次数 方向 填充模式)

其中， 方向包括：reverse（反向），alternate（交替），alternate-reverse（反向交替） 填充模式包括：none/forwards/backwards/both

我们还可通过pause/running设置暂停和继续。

© 饥人谷