CSS动画

动画的原理

浏览器的渲染过程

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

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

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

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:时长|过渡方式|延迟|次数|方向|填充模式|是否暂停
CSS动画_第1张图片|动画名
具体查看MDN文档

你可能感兴趣的