《CSS动画知识概述》

一.浏览器的渲染原理

首先，简单概括下浏览器渲染的步骤：

• 根据HTML构建HTML树。(DOM)
• 根据CSS构建CSS树。(CSSOM)
• 将两棵树合并成一棵渲染树。(render tree)
• Layout,布局。(文档流、盒模型、计算大小和位置)
• Paint,绘制。(绘制边框颜色、文字颜色、阴影等元素)
• Compose,合成。(根据层叠关系合成展示画面)

如下图所示，三棵树示意图。

然后浏览器根据更新的样式进行渲染，达到一种“动画”的视觉效果。

如下所示，三种更新的方式：

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

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

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

例：改变背景颜色，直接repaint > composite.

3. JS / CSS > 样式 > 合成

例：改变transform，只需composite

在 iframe 查看 Paint flashing 有问题，需全屏查看。

在这个分享社区csstriggers.com/，分享了每个元素在不同的浏览器内核触发什么流程的测试结果。

二.CSS动画的两种做法

1. 通过transform的位移translate、缩放 scale、旋转 rotate 和倾斜 skew，配合 transition 过渡补帧和 ::hover 悬浮，通过鼠标触发显示动画。

示例代码:动画例子
鼠标放在红心上变大效果动画。

2. 通过 transform , transition 和 animation 生成自动效果动画。

效果动画 跳动的红心。

示例代码

注：inline 元素不支持 transform,需要先变成 block 元素。

三、其他感想

CSS常用的样式和属性的学习也有一周，将要告一段落。CSS复杂繁多的样式和属性，且还在不停地更新和增加，故对CSS的学习不在于死记上百条样式，而在于活用。要善于在谷歌查找MDN样式文档，不求一次细读文档即可理解，而是活用MDN文档的demo，语法和演示，不停地进行CMR，即拷贝、修改和运行，通过不停地试错，在实践中理解文档，补全文档的解释。而对于今后CSS的学习，要把其当做工具书、标准化文档看待，因CSS不正交，在层叠样式中产生的bug，解决bug的方法，应当成是一种修正方案，而不应该对其原因过多的进行深究。

参考资料

渲染树构建、布局及绘制
渲染性能
使用transform来实现动画

©right;转载声明