CSS渲染和动画知识

JFrank2019
195 阅读2分钟

浏览器渲染原理 CSS动画的两种做法（transition 和 animation）

一、浏览器渲染原理

参考文章（Google 团队写的文章）

浏览器渲染过程

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

如何更新样式

一般用JS来更新样式

div.style.background = 'red';
div.style.display = 'none';
div.classList.add('red');
div.remove();

其中涉及到三种更新方式

  1. JS / CSS > 样式 > 布局 > 绘制 > 合成
  2. JS / CSS > 样式 >    > 绘制 > 合成
  3. JS / CSS > 样式 >    >    > 合成
  • 第一种，全走
    • div.remove() 会触发当前消失，其他元素 relayout
  • 第二种，跳过 layout
    • 改变背景颜色，直接 repaint + composite
  • 第三种，跳过 layout 和 Paint
    • 改变transform，只需 composite

二、CSS动画

transform 和 transition

mdn链接

transform的四个常用功能

  • 位移 translate
  • 缩放 scale
  • 旋转 rotate
  • 倾斜 skew

transition 过渡语法（补充中间帧）

示例

  • transition: 属性名 时长 过渡方式 延迟
  • transition: left 200ms linear
  • 可以用逗号分割两个不同树形
  • transition: left 200ms, top 400ms
  • 可以用 all 代表所有属性
  • transition: all 200ms
  • 过渡方式有：linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier | step-start | step-end | steps。

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

  • display: none => block 没法过渡
  • 一般改成 visibilidy: hidden => visible

过渡必须要有起始，一般只有一次动画，或者两次，比如 hover 和非 hover 状态的过渡

如果还有中间点的话，可以使用如下方法解决：

  1. 使用两次 transform

.a => transform => .b

.b => transform => .c

通过 setTimeout 或者监听 transitionend 事件

  1. 使用 animation

声明关键帧

@keyframes 动画名称 {
  from {
    /* 初始样式 */
  }
  to {
    /* 结束样式 */
  }
}
@keyframes 动画名称 {
  0% {
    /* 初始样式 */
  }
  n% {
    /* 中间样式 */
  }
  /* ,,, */
  100% {
    /* 结束样式 */
  }
}

添加动画

animation语法

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

  • 时长：1s 或者 1000ms
  • 过渡方式：和 transition 取值一样，如 linear
  • 次数：正整数 或者 infinite (无穷)
  • 方向：reverse | alternate | alternate-reverse
  • 填充模式：none | forwards | backwards | both
  • 是否暂停：pause | running
  • 以上所有的属性都有单独的属性
avatar
文章
阅读
粉丝