CSS入门笔记5(浏览器渲染，CSS动画全解)

---

要说的话

本文主要记录学习css动画的过程，主要讲浏览器渲染原理，translate平移，transition过渡，animation动画，最后还有个小实践-跳动的💗，本文源码都有的。–资料来源饥人谷

---

i.动画是什么呢？

定义：

动画是一种通过定时拍摄一系列多个静止的固态图像（帧）以一定频率连续变化、运动（播放）的速度（如每秒16张）而导致肉眼的视觉残象产生的错觉——而误以为图画或物体（画面）活动的作品及其影片技术。–来自维基百科

---

ii.怎么写出动画效果呢？

查看动画渲染重画过程可以通过F12(或者想要查看的位置鼠标右键检查)进入开发者工具，在任意地方按esc，可以弹出一个控制台，点击控制台旁边的三个竖点(more tools)，选择Rendring，勾选Paint Flashing，屏幕不断出现绿色就是浏览器在不断渲染。

• 第一种方式:用left做动画(会经过浏览器全部步骤，浏览器渲染会介绍)

具体代码可以查看http://js.jirengu.com/kejop/1/edit?html,css,js,output

可以看到方框内一直都是绿色，说明浏览器一直在渲染，repaint不断地重复画删画删的操作。–》加重了性能负担

• 第二种方式:用transform做动画* （只经过最后composite，浏览器渲染会说到）

具体代码可以查看http://js.jirengu.com/dukek/1/edit?html,css,js,output

可以看到只有开始和结束时是绿的，说明浏览器并没有repaint–》两相对比说明比用left性能更👍。

---

iii.和动画息息相关的是浏览器的渲染

那就来了解一下浏览器的渲染吧。

参考自google团队，详细了解可以点击下面文字(查看具体链接地址可以用开发者工具查看)

• 渲染树构建、布局及绘制

• 渲染性能

• 使用transform来查看

1) 浏览器渲染过程

步骤:

• 根据HTML构建HTML树（DOM）

• 根据CSS构建CSS树（CSSOM）

• 将两颗树合并成一颗渲染树（render tree）

• Layout布局（文档流、盒模型、计算大小和位置）–》“素描”

• Paint绘制（把边框颜色、文字颜色、阴影等画出来）–》“填色”

• Compose合成（根据层叠关系展示画面）–》“所有层拍平变成一层东西显示屏幕上”

三棵树有个图

相同节点和起来就是渲染树(render tree)

2)怎么更新样式呢？

一般用JS来跟新样式

比如div.styel.background = ‘red’

div.style.display = ‘none’

div.classList.add(‘red’) *

div.remove()直接删掉节点

3)这些方式有三种不同的渲染方式*

1. JS / CSS > 样式 > 布局 > 绘制 > 合成

如果修改了元素的“layout”属性，也就是改变了元素的几何属性（例如宽度、高度、左侧或顶部位置等），那么浏览器将必须检查所有其他元素，然后“自动重排”页面。任何受影响的部分都需要重新绘制，而且最终绘制的元素需进行合成。
算style，可能还要走Layout，Paint，Conposite三步合成

2. JS / CSS > 样式 > 绘制 > 合成

如果修改了“paint only”属性（例如背景图片、文字颜色或阴影等），即不会影响页面布局的属性，则浏览器会跳过布局，但仍将执行绘制。

3. JS / CSS > 样式 > 合成

如果您更改一个既不要布局也不要绘制的属性，比如transform，则浏览器将跳到只执行合成。

4)三种更新方式

需要用到开发者工具上面所说renderng-paint flash

• 第一种，全走

div.remove()会触发当前消失，其他元素relayout

具体代码http://js.jirengu.com/fewij/1/edit?html,css,js,output

效果如下

可以看到三个方框删掉第一个空白框框后，三个框框原本位置都绿了–》证明浏览器经过了布局，绘制和合成

• 第二种，跳过layout

改变背景颜色，直接repaint + composite

具体代码http://js.jirengu.com/sovoq/1/edit?html,css,js,output

可以看到效果如下

可以看到第一个方框改变颜色为红时变绿了其他没有变色–》跳过了layout，直接paint和composite

• 第三种，跳过layout和paint

改变transform，直接composite

具体代码http://js.jirengu.com/pabegi/1/edit?html,css,js,output

效果如下

可以看到只有开始和结束被绘制，中间没有被repaint(重新绘制)–》直接composite

5)每个属性触发哪个流程推荐网站

要想知道哪个属性触发哪个流程除了自己试一遍别无他法，有个网站把所有属性都试过了

推荐看网站https://csstriggers.com/

可以告诉你每一种属性到底触发的什么流程，相同属性不同浏览器可能触发的流程不同。

---

iv.CSS动画优化

推荐去看google的文章里面详细讲了每个步骤的优化，太长不想看可以看TL;DR(太长不想读)。

---

v.transform(变形)全解

推荐看transform MDN,他会把每一个属性都给你一个列子动画，并且告诉你怎么用。

transform有四个常用的功能

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

一般都需要配合transition过渡

inline元素不支持transform，需要先变成block

1. translate-移动

常用写法