浏览器渲染原理
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
