CSS动画总结

1. 浏览器渲染原理

渲染步骤：

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

CSS渲染过程依次包括布局、绘制、合成，其中布局和绘制有可能被省略，因此存在三种更新方式。

使用 transform 可跳过前两个步骤。

CSS动画优化：

JS 优化：使用 requestAnimationFrame 代替 setTimeout 或 setInterval。

CSS 优化：使用 will-change 或 translate。

2. transform

2.1. 位移 translate

• translateX(<length-percentage>)
• translateY(<length-percentage>)
• translate(<length-percentage>，<length-percentage>?)
• translateZ(<length>)且父容器中定义 perspective
• translate3d(x,y,z)

注意：translate(-50%，-50%)可做绝对定位元素在父元素里的居中，如下例。

style{
    div{
        width: 100px;
        height: 100px;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
}

2.2. 缩放 scale

• scaleX(<number>)
• scaleY(<number>)
• scale(<number>,<number>?)

2.3. 旋转 rotate

• rotate([<angle>|<zero>])
• rotateZ([<angle>|<zero>])
• rotateX([<angle>|<zero>])
• rotateY([<angle>|<zero>])

2.4. 倾斜 skew

• skewX([<angle>|<zero>])
• skewY([<angle>|<zero>])
• skew([<angle>|<zero>],[<angle>|<zero>]?)

注意：

• 一般都需要配合 transition 过渡
• inline 元素不支持 transform，需要先变成 block

3. transition

语法：属性名 时长 过渡方式 延迟

transition: left 200ms linear

过渡方式有 linear、ease、ease-in、ease-out、ease-in-out、cubic-bezier、steps-start、step-end 和 steps。

注意：不是所有属性都能过渡。

如display: none变成display: block不能过渡。

一般改成visibility: hidden到visibility: visible。

4. animation

3.1 关键帧

@keyframes x {
  from {
  	transform: scale(1.0);
  }
  to {
	transform: scale(1.3);
  }
}

可以写 from to，也可以写百分数。

3.2 animation缩写语法

animation: 时长|过渡方式|延迟|次数|方向|填充模式|是否暂停|动画名 ；

时长：1s 或者 1000ms

过渡方式：取值与 transition 一样，如 linear

次数：infinite

方向：reverse|alternate|alternate-reverse

填充模式：none|forward|backwards|both

是否暂停：paused|running