《CSS知识总结之CSS实现动画》

茶茶君
210 阅读2分钟

浏览器渲染原理

渲染过程

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

三棵树模型图

如何更新样式

  • 一般用js来更新样式
div.style.background='red';
div.style.dispaly='none';
div.classListAdd('red');
div.remove();

  • 不同的更新样式，渲染方式也不同

  • 三种更新方式：

    1. JS/CSS>样式>布局>绘制>合成： JavaScript>Style>Layout>Paint>composite

    如：div.remove()会触发当前元素消失，其他元素relayout

    1. JS/CSS>布局>绘制>合成： JavaScript>Style>Layout>Paint>composite

    如：改变元素背景颜色，直接repaint+composite

    1. JS/CSS>绘制>合成： JavaScript>Style>Paint>composite

    如：改变transform，只需composite

CSS 动画的两种做法（transition 和 animation）

transition(过渡)

  • 作用：补充中间帧

  • transition语法：

    transiton：属性名 时长 过渡方式 延迟

    格式如 transition: all 4s ease-in-out 1s;

  • 注意：

    1. 可用逗号隔开不同属性，如 transition: margin-right 4s, color 1s;
    2. 也可用 all 代表所有属性，如 transition:all 100ms;
    3. 过渡方式有：linear/ease/ease-in/ease-out/ease-in-out/cubic-bezier/step- start/step-end/steps等，具体含义要靠数学知识;
    4. 不是所有属性都能用 transition ，如 display:none=>block ;
    5. 如果有中间点，可使用两次 transition 。

animation(动画)

  • 作用：在有中间点时，用于替代 transition ，搭配keyframes选择器使用。

  • keyframes语法：

    from to写法和百分数写法

@keyframes slidein {
  from {
    transform: translateX(0%);
  }

  to {
    transform: translateX(100%);
  }
}

@keyframes identifier {
  0% { top: 0; left: 0; }
  30% { top: 50px; }
  68%, 72% { left: 50px; }
  100% { top: 100px; left: 100%; }
}

  • animation语法：

    animation:动画名/时长/过渡方式/延迟/次数/方向/填充模式/是否暂停；

    1. 时长：1s或1000ms等
    2. 过渡方式：与transition取值一样，如linear等
    3. 次数：3或者4或者infinite等
    4. 方向：reverse | alternate | alternate-reverse
    5. 填充方式：none | forwards | backwards | both
    6. 是否暂停：paused | running

    注意：以上属性都有对应单独的属性对应，具体可以去MDN上查。

写个栗子，比较下效果

css动画优化

js优化

使用 requestAnimationFrame 代替 setTimeout或setInterval

css优化

使用will-change或translate

学习心得

不会的先去查MDN，查完了自己试，试过还不懂再问，培养自己解决问题能力很重要！

avatar
文章
阅读
粉丝