CSS 动画总结

·  阅读 38

1. 浏览器渲染原理

步骤:

  1. 根据HTML构建HTML树(DOM)
  2. 根据CSS构建CSS树(CDOM)
  3. 将两棵树合并成一棵渲染树
  4. Layout布局(文档流、盒模型、计算大小、位置)
  5. Paint绘制(把边框颜色、文字颜色、阴影等画出来)
  6. composite合成(根据层叠关系合成)

三种更新样式的方式: 第一种:全走 示例:js.jirengu.com/jagel/1/edi…

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

第二种,跳过layout() 示例:js.jirengu.com/jidam/1/edi…

改变背景颜色,直接repaint+composite

第三种,跳过layout和paint 示例:js.jirengu.com/wusew/1

改变transform,只需composite

2. CSS 动画的两种做法(transition 和 animation)

  • transition:使用两次transfrom

    示例:js.jirengu.com/hudebomavu/…

  • animation: 步骤:

    1. 声明关键帧@keyframes

    @keyframes标准写法:

    • 第一种:from to
    • 第二种:百分数
    @keyframes heart{
      0%{transform: scale(1);}
      100%{transform: scale(1.5);}
    }
    复制代码
    1. 添加动画

animation语法: animation:``时长、过渡方式、延迟、次数、方向、填充模式、是否暂停、动画名;

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改