浏览器渲染过程
- 根据HTML构建HTML树（DOM）
- 根据CSS构建CSS树（CSSOM）
- 将两棵树合并成一棵树（render tree）
- Layout布局（文档流、盒模型、计算大小和位置）
- Paint绘制（把边框颜色、文字颜色、阴影等画出来）
- compose合成（根据层叠关系展示画面）
CSS 进阶之动画
我们都知道动画电影由一帧一帧的静态画面拼接而成，一秒动画有24帧画面，如果低于24帧，人眼即可感知画面切换，就会有卡顿的感觉。
CSS 中，如果按一秒24帧的画法来写代码，未免太过繁琐。所以我们把动画拆解为动作(transition)，一个动作表示从一个状态到另一个状态的变化，然后把一组动作串起来，即是 CSS 中的动画(animation)
CSS 动画的两种做法（transition 和 animation）
1.transition
- 作用：补充中间帧
- 语法
transititon:属性名 时长 过渡方式 延迟
如：
transition: left 200ms linear
可以用逗号分隔不同的属性
transition:left 200ms,top 300ms
可以用all来代表所有的属性，但并不是所有的属性都能过渡
display:none = >block无法过渡
一般改成visibility:hidden=>visible
过渡方式有：
linear|ease|ease-in|ease-out|ease-in-out等等
2.animation
- 声明关键帧
- 添加动画
如何让动画停在最后一帧
- 搜索CSS animation stop at end
- 加个forwards
@keyframes 写法
1.搜索MDN keyframes
2.一种是from to
@keyframes xxx{
from{
transform:translate(0%)
}
to{
transform:translate(100%)
}
}
3.一种是按百分比来写
@keyframes xxx{
0%{top:0; left:0}
30%{top:50px;}
68%,72%{left:50px;}
100%{top:100px; left:100%}
}
缩写语法
animation:时长|过渡方式|延迟|方向|填充模式|是否暂停|动画名
1.时长：1s或者1000ms
2.过渡方式：跟transition取值一样，如linear
3.次数：3或者infinite
4.方向：reverse|alternate|alternate-reverse
5.填充方式：none|forwards|both|backwards
6.是否暂停：pause|running
以上属性都有对应的单独属性
transform四个常用功能
- 位移 translate
- 缩放 scale
- 旋转 rotate
- 倾斜 skew
主要用法请参考MDN transform MDN
