浏览器渲染过程

• 根据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