CSS动画

动画的原理

浏览器的渲染过程

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

浏览器的渲染原理的三种更新方式

• JS/CSS>样式>布局>绘制>合成
  
  备注：布局可以简单理解为位置和大小，如果CSS中有对布局相关的内容进行改动，那么浏览器渲染时，会重新走布局>绘制>合成的路线
  官方回答：如果您修改元素的“layout”属性，也就是改变了元素的几何属性（例如宽度、高度、左侧或顶部位置等），那么浏览器将必须检查所有其他元素，然后“自动重排”页面。任何受影响的部分都需要重新绘制，而且最终绘制的元素需进行合成。
• JS/CSS>样式>绘制>合成
  
  备注：这个可以理解为在对CSS进行相关改动时，如果没有对位置和大小进行到改动，则浏览器进行渲染时会跳过布局这个流程，加入你只修改了背景颜色，那么渲染时就走绘制>合成的路线
  官方回答：如果您修改“paint only”属性（例如背景图片、文字颜色或阴影等），即不会影响页面布局的属性，则浏览器会跳过布局，但仍将执行绘制。
• JS/CSS>样式>合成
  

CSS动画优化

• JS优化
  使用requestAnimationFrame代替setTimeout或setInterval
• CSS优化
  使用will-change或transform

transform四个常用功能

• translate 位移
• scale 缩放
• rotate 旋转
• skew 倾斜
  具体用法可查看MDN文档

transition的用法
作用：补充中间帧
语法：transition:属性名 时长 过渡方式 延迟
过渡方式：

• linear
• ease
• ease-in
• ease-out
• ease-in-out
• cubic-bezier
• step-start
• step-end
• steps

animation的用法
作用：声明关键帧，添加动画
声明关键帧：

• 语法：@keyframs 动画名{}
• 标准写法 如下

@keyframes 动画名 {
  from {
    transform: translateX(50%);
  }

  to {
    transform: translateX(100%);
  }
}

@keyframes 动画名 {
  0% { top: 0; left: 0; }
  30% { top: 30px; }
  68%, 72% { left: 30px; }
  100% { top: 60px; left: 100%; }
}

语法：animation:时长|过渡方式|延迟|次数|方向|填充模式|是否暂停
|动画名
具体查看MDN文档