CSS 知识总结——CSS动画浏览器渲染原理、CSS动画做法、CSS动画优化。浏览器的渲染过程、渲染方式、transfo

浏览器渲染原理

浏览器的渲染过程

根据HTML构建HTML树
根据CSS构建CSS树
将两棵树合并成一颗渲染树
Layout布局（文档流、盒模型、计算大小和位置）
Paint绘制（把边框颜色、文字颜色、阴影等画出来）
Compose合成（根据层叠关系展示画面）

渲染方式

全走
```
JS/CSS >样式>布局>绘制>合成
```
跳过layout
```
JS/CSS >样式>绘制>合成
```
跳过layout和paint
```
JS/CSS >样式>合成
```

CSS 动画的做法

transform四个常用功能：

translate 位移
scale 缩放
rotate 旋转
skew 倾斜

transform: translateX(200px); /*向右移动200px*/
transform: translateY(200px); /*向左移动200px*/
transform: translate(200px，200px); /*向右移动200px，向左移动200px*/
transform: scale(1.5);/*放大1.5倍*/
transform: scaleX(1.5);/*x方向上放大1.5倍*/
transform: scaleY(1.5);/*y方向上放大1.5倍*/
ransform: rotate(45deg);/*旋转45度*/
ransform: rotateX(45deg);/*x方向上旋转45度*/
ransform: rotateY(45deg);/*y方向上旋转45度*/
ransform: skewX(15deg);/*倾斜15度*/
ransform: skewY(15deg);
ransform: skew(15deg,15deg);

transform多重效果：

transform: scale(1.5) translateX(200px);

transtion 过渡

语法：transition：属性名时长过渡方式延迟
过渡方式：linear、ease、ease-in 、ease-out、ease-in-out 、cubic-bezier、step-start、 step-end、 steps
使用方法：

transition: all 1s;
transition: margin-right 4s 1s;
transition: margin-right 4s ease-in-out;
transition: margin-right 4s ease-in-out 1s;

animation

语法：animation：时长过渡方式延迟次数方向填充模式是否暂停动画名
方向：reverse、alternate、alternate-reverse
填充模式：none、forwards、backwards、both
是否暂停：paused、running

#xxx{
animation: .7s xxx infinite alternate-reverse
}

@keyframes xxx {
  0% {transform: scale(1);}
  100%{transform: scale(1.5);}
  }

animation其他用法：

animation: 3s ease-in 1s 2 reverse both paused slidein;
animation: 3s linear 1s slidein;
animation: 3s slidein;

transtion和animation的区别 transtion：一般只有一次动画，或者两次，且多次动画较使用复杂
animation：可以加入中间点，使用较简单

CSS动画优化

可看此链接
把left改成transform
用requestAnimationFrame代替setTimeout或setInterval
使用will-change或translate

其他

绝对居中方法

left:50%;
top:50%;
transform: translate(-50%,-50%)

Repaint & Reflow

Repaint(重绘)

由于节点的几何属性发生改变或者由于样式发生改变而不会影响布局的，称为重绘，例如outline, visibility, color、background-color等，重绘的代价是高昂的，因为浏览器必须验证DOM树上其他节点元素的可见性。

Reflow(回流)

回流是布局或者几何属性需要改变就称为回流。回流是影响浏览器性能的关键因素，因为其变化涉及到部分页面（或是整个页面）的布局更新。一个元素的回流可能会导致了其所有子元素以及DOM中紧随其后的节点、祖先节点元素的随后的回流。 大部分的回流将导致页面的重新渲染。

回流必定会发生重绘，重绘不一定会引发回流。

资料参考：

饥人谷
github.com/Advanced-Fr…