浏览器渲染原理及 CSS 动画

一、浏览器渲染原理

1. 根据 HTML 构建 HTML 树（DOM）
2. 根据 CSS 构建 CSS 树（CSSOM）
3. 将 HTML 树和 CSS 树合成一棵渲染树（ render tree）
4. 根据文档流和盒模型计算大小和位置（layout 布局）
5. 把边框颜色、文字颜色和阴影等画出来（paint 绘制）
6. 根据层叠关系展示画面（compose 合成）

一般我们用 JS 来更新样式。浏览器渲染更新的过程有 3 种：

1. JS -> style -> layout -> paint -> compose
   这种方式一种是 div 的移动

2. JS -> style -> paint -> compose
   这种方式跳过了 layout，一般是改变了背景颜色

3. JS -> style -> compose
   这种方式跳过了 layout 和 paint，一般是通过 transform 来改变的

二、CSS 动画

CSS 动画一般分为两种，transition 和 animation

1. transition 的用法

（1）语法
transition：属性值 过渡时间 过渡方式 延时
（2）可动画属性参见 MDN 的 CSS animated properties，常用的有，大小，位置，颜色
（3）过渡方式有以下几种

• linear 匀速
• ease 先慢后快再慢
• ease-in 先慢后快
• ease-out 先快后慢
• ease-in-out 先慢后快再慢
• cubic-bezier(<number[0,1]>, <number>, <number[0,1]>, <number>)，贝赛尔曲线
  （4）代码示例

div {
  border: 2px solid red;
  width: 550px;
  height: 100px;
  transition: all 2s ease .9s;
}
div:hover {
 height : 200px;
}

一般 transition 只能从一个状态变化到另一个状态，后两个属性如果不需要设置可以省略，通常需要配合伪类 ：hover，：active 或者 JS 一起使用，0.9 可以省略为 .9，不能循环变化，如果需要循环变化，需要使用下面介绍的animation (关键帧）来实现。

2. animation 的用法

(1) 创建关键帧

@keyframes 动画名字 {
    from { 状态1; }
    to { 状态2; }
}

或者

@keyframes 动画名字 {
     0% { 状态1; }
    25% { 状态2; }
    50% { 状态3; }
    75% { 状态4; }
   100% { 状态5; }
}

代码示例

@keyframes rotaty {
  from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

(2) 配置动画
animation : 动画名称 过渡时间 过渡方式 延时 次数 播放方向

• 过渡方式和 transition 大体相同
• 次数可以指定多少或者无限次数 infinite
• 播放方向有以下几个
  normal 正常
  reverse 反向
  alternate 正常交替
  alternate-reverse 反向交替
  代码示例

.taiji {
  position: relative;
  width: 200px;
  height:200px;
  animation:  rotaty 1s linear 1s infinite reverse ;
}

无限旋转的太极

---

资料来源：饥人谷，MDN