浏览器渲染原理

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

有关transform的一些知识

四个常用的功能

• 位移 : translate
• 缩放 : scale
• 旋转 : rotate
• 倾斜 : skew

一、 transform之translate

常用写法

• 1、translateX

transform:translateX(<length-percentage>);

• 2、translateY

transform:translateY(<length-percentage>);

• 3、translate

transform:translate(<length-percentage>,<length-percentage>);

• 4、translateZ

transform:translateZ(<length>);

且父容器perspective

• 5、translate3d

transform:translate3d(x,y,z);

注：translate(-50%,-50%)可做绝对定位元素的居中

二、transform之scale

常用写法

• 1、scaleX

transform:scaleX(<number>);

• 2、scaleY

transform:scaleY(<number>);

• 3、scale

transform:scale(<number>,<number>);

三、transform之rotate

常用写法

• 1、rotate

transform:rotate([<angle>|<zero>]);

• 2、rotateZ

transform:rotateZ([<angle>|<zero>]);

• 3、rotateX

transform:rotateX([<angle>|<zero>]);

• 4、rotateY

transform:rotateY([<angle>|<zero>]);

四、transform之skew

常用写法

• 1、skewX

transform:skewX([<angle>|<zero>]);

• 2、skewY

transform:skewY([<angle>|<zero>]);

• 3、skew

transform:skew([<angle>|<zero>],[<angle>|<zero>]);

transform多重效果

• 组合使用

transform:scale(0.5)  translate(-100%,-100%);

• 取消所有

transform:none;

transition过渡

作用：补充中间帧

相关语法

• 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

（过渡必须要有起始，一般只有一次动画或者两次，比如hover和非hover状态的过渡）

有关animation的知识

使用方式

• 声明关键帧
• 添加动画

@keyframes完整语法

• 标准写法

@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%; }
}

在这里，top使用属性动画0%，30%以及100%关键帧，并left使用动画0%，68%，72%和100%关键帧。

• 多次定义关键帧时
  如果多次定义关键帧，但并非所有受影响的属性都在每个关键帧中，则将考虑这些关键帧中指定的所有值。

@keyframes identifier {
  0% { top: 0; }
  50% { top: 30px; left: 20px; }
  50% { top: 10px; }
  100% { top: 0; }
}

在此示例中，在50%关键帧处，使用的值为top: 10px和left: 20px。

animation编写语法

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

• 时长：1s或100ms
• 过渡方式：跟transition取值一样，如linear
• 次数：3或者2.4或infinite
• 方向：reverse、alternate、alternate-reverse
• 填充模式：none、forwards、backwards、both
• 是否暂停：paused、running

(以上所有的属性都有对应的单独属性)