锐客网

  1. 首页 > it技术 > >

CSS动画

动画的原理 浏览器的渲染过程

  • 根据HTML构建HTML树 （DOM）
  • 根据CSS构建CSS树（CSSOM）
  • 将两棵树合并成一颗渲染树 （render tree）
  • Layout布局 （文档流、盒模型、计算大小和位置）
  • Paint绘制（把边框颜色、文字颜色、阴影等画出来）
  • Compose合成（根据层叠关系展示画面）
浏览器的渲染原理的三种更新方式
  • JS/CSS>样式>布局>绘制>合成
    CSS动画
    文章图片

    备注：布局可以简单理解为位置和大小，如果CSS中有对布局相关的内容进行改动，那么浏览器渲染时，会重新走布局>绘制>合成的路线
    官方回答：如果您修改元素的“layout”属性，也就是改变了元素的几何属性（例如宽度、高度、左侧或顶部位置等），那么浏览器将必须检查所有其他元素，然后“自动重排”页面。任何受影响的部分都需要重新绘制，而且最终绘制的元素需进行合成。
  • JS/CSS>样式>绘制>合成
    CSS动画
    文章图片

    备注：这个可以理解为在对CSS进行相关改动时，如果没有对位置和大小进行到改动，则浏览器进行渲染时会跳过布局这个流程，加入你只修改了背景颜色，那么渲染时就走绘制>合成的路线
    官方回答：如果您修改“paint only”属性（例如背景图片、文字颜色或阴影等），即不会影响页面布局的属性，则浏览器会跳过布局，但仍将执行绘制。
  • JS/CSS>样式>合成
    CSS动画
    文章图片
CSS动画优化
  • JS优化
    使用requestAnimationFrame代替setTimeout或setInterval
  • CSS优化
    使用will-change或transform
【CSS动画】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动画
文章图片
|动画名
具体查看MDN文档

    推荐阅读


    上一篇：听，花开的声音（十）

    下一篇：上房揭瓦的年纪他学会了担当！