动画的原理

浏览器的渲染过程

  • 依据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文档