1. 浏览器渲染过程

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

2. CSS 动画的两种做法（transition 和 animation）

2.1 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

其中要注意

• 并不是所有属性都能过渡
• 过渡必须要有起始

除了起始还有中间点

• 可以使用两次transform用setTimeout或者监听transitionend事件知道到了中间点
• 使用animation声明关键帧@keyframes xxx（xxx为动画名）再添加动画，如果要让动画停留在最后一帧，在动画中加上forward即可。

2.2 animation

需要先写 @keyframes

写法为

@keyframes animation-name {
           from {
               transform:translateX(0%);
           }
           to {
               transform:translateX(100%);
           }
}

或

@keyframes animation-name {
           0% {
               transform:scale(1);
           }
           100% {
               transform:scale(1.5);
           }

在animation-name的选择器中加上animation

animation缩写语法如下

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

• 时长：1s或者1000ms
• 过渡方式：跟transition取值一样，如linear
• 次数：3或者2.4或者infinite
• 方向：reverse|alternate|alternate-reverse
• 填充模式：none|forwards|backwards|both
• 是否暂停:paused|running
• 以上所有属性都有对应的单独属性写法