乐趣区

关于css:CSS动画

jiezi

动画的原理

浏览器的渲染过程

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

退出移动版