浏览器渲染原理

渲染过程

1. 根据HTML构建HTML树(DOM)
2. 根据CSS构建CSS树（CSSOM）
3. 合并为渲染树（render tree）
4. Layout（文档流、盒模型、计算大小和位置）
5. Paint（颜色、阴影）
6. Comepose

• DOM

  

• CSSOM

  

• render tree

  

CSS动画

transform

• translate:translateX(x)``translateZ(<length>)且父容器应加属性perspective
• scale
• rotate
• skew
• 注意：inline元素不支持transform，需要先变成block

CSS动画的两种做法

transition

• 补充中间帧
• 语法

1. transition: 属性名 时长 过渡方式 延迟
2. 多个属性用逗号分隔：transition: left 1s ease, bottom 1s linear;
3. all代表全部属性：transition: all 1s;

• 注意：并不是所有属性都能过渡

1. display: none => block一般改为visibility: visible => hidden
2. background可过渡
3. opacity可过渡

animation

• 添加动画
• 语法

1. animation: 时长 过渡方式 延迟时间 次数 方向 填充模式 是否暂停 动画名 animation: 1s linear 1s infiite reverse forwards paused;
2. 声明关键帧 @keyframes

@keyframes demo{
    0% {top: 0;}
    50% {top: 100px;}
    100% {top: 20px;}
}