1.浏览器渲染原理
根据HTML标记并构建DOM树
根据CSS构建CSS树（CSSOM）
将两棵树合并成一棵渲染树（render tree)
layout布局（文档流，盒模型，计算大小或位置等）
paint绘制（边框颜色，背景颜色，阴影等绘制）
composite合成（根据层叠关系展示画面）
2.CSS 动画的两种做法（transition 和 animation）
（1）用transform + transition，transform负责变化， transition负责过渡,补充中间帧
transform四个常用功能:：translate位移 scale缩放 rotate旋转 skew倾斜
语法
translate:name duration timing-function delay;
时间
animation-duration:s/ms
过渡方式
animation-timing-function:
取值：ease/linear/ease-in/ease-out/ease-in-out...
延迟
animation-delay:s/ms
（2）语法
animation：duration timing-function delay count direction animation-fill-mode animation-play-state;
动画名称
animation-name:动画名称
时间
animation-duration:s/ms
过渡方式
animation-timing-function:
取值：ease/linear/ease-in/ease-out/ease-in-out...
延迟
animation-delay:s/ms
次数
animation-iteration-count:
取值
具体播放次数
无限次infinite
方向
animation-direction:
取值
normal0%→100%;
reverse100%→0%;
alternate轮流播放;
alternate-reverse
填充
animation-fill-mode:
取值：
none;
backwards 延迟时间内，填充动画的第一帧;
forwards 动画播放完毕后，填充动画的最后一帧;
both
暂停和播放
animation-play-state:
取值:paused/running
关键帧：
@keyframes 动画名称{
0%{css样式}
....
100%{css样式}
}
或者
@keyframes 动画名称{
from{transform功能}
to{ransform功能}
}
