css 胶囊 两种颜色_CSS 动画知识总结

浏览器渲染原理

CSS Animations是CSS的一个模块，定义了如何用关键帧来随时间推移对CSS属性的值进行动画处理。那么浏览器本身是如何对动画进行解析的呢？

渲染步骤

• 根据HTML构建HTML Tree（DOM）；
• 根据CSS构建CSS Tree（CSSOM）；
• 浏览器引擎通过DOM Tree 和 CSS Rule Tree 来构造 Rendering Tree ；
• Layout布局（文档流，盒模型，计算大小和位置）；
• Paint绘制（把边框颜色，文字颜色，阴影等画出来）；
• Compose合成（根据层叠关系展示画面）。

如何更新样式

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