总结

浏览器渲染原理

浏览器渲染过程

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

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

CSS 动画之 transition

1. 作用: 补充中间帧
2. 语法：

• 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
  县体含义要靠数学知识

3.注意 ---- 有的属性无法过渡

• display: none => block 没法过渡
• 一般改成 visibility: hidden =>visible(不要问为什么)
• display和 visibility 的区别自己搜一下
• background 颜色可以过渡吗?
• opacity 透明度可以过渡吗?

4. 过渡最好有起始状态（ 两种及以上 ） -- 两种方法

• 使用两次 transform

  • .a === transform ===> .b

  • .b === transform ===> .c

  • 如何知道到了中间点呢?

  • 用 setTimeout 或者监听 transitionend 事件

• 使用 animation声明
  • 关键帧
  • 添加动画

CSS 动画之 animation

• 写法

    @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: 时长|过渡方式|延迟|次数|方向|填充模式是否暂停|动画名;
  • 时长: 1s 或者 1000ms 过渡方式: 跟 transition 取值一样，如 linear
  • 次数: 3或者 2.4 或者 infinite
  • 方向: reverse | alternate | alternate-reverse
  • 填充模式: none | forwards | backwards|both
  • 是否暂停: paused |running
  • 以上所有属性都有对应的单独属性