关于css: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 文档