1. 浏览器渲染原理
浏览器渲染的过程主要包括以下五步：
① 浏览器将获取的HTML文档解析成DOM树
② 处理CSS标记，构成层叠样式表模型CSSOM(CSS Object Model)
③ 将DOM和CSSOM合并为渲染树(rendering tree)将会被创建，代表一系列将被渲染的对象
④ 渲染树的每个元素包含的内容都是计算过的，它被称之为布局layout。浏览器使用一种流式处理的方法，只需要一次pass绘制操作就可以布局所有的元素
⑤ 将渲染树的各个节点绘制到屏幕上，这一步被称为绘制painting
2. transition动画做法
作用：补充中间帧数
transition-property:指定过度的元素; 如：transition-property:height,就是指在动画过程中height元素参与变化
transition-duration：指定这个过度持续时间;
transition-delay:延迟过度时间;
transition-timing-function:指定时间过度类型; 如：ease\linear\ease-in\ease-out\ease-in-out\
其中：ease是越来越慢，linear是匀速运动，ease-in是先慢后快，ease-out是先快后慢，ease-in-out是先慢后快再慢，transition：all指全部属性参与
display和visibility区别：
display:block 和 visibility: visible 都有让元素显示的意思，那么两者的区别在与：
display:none（消失）是在不再占用空间
visibility:hidden （隐藏）使元素在网页上隐藏，但仍占用空间
3. animation动画做法
作用：声明关键帧；添加动画
@keyframes 定义关键帧动画
animation-name 动画名称
animation-duration 动画时间
animation-timing-function 动画曲线linear（匀速）| ease（缓冲）| step（步数）
animation-delay 动画延迟
animation-play-state 动画状态 paused（停止）| running（运动）
animation：name duration timing-function delay iteration-count direction；同时设置多个属性
方向（animation-direction）
normal 默认正常
reverse 相反方向
alternate 默认正常方向循环（需要配合次数）
alternate-reverse 默认相反方向循环（需要配合次数）
填充模式（animation-fill-mode）
none 默认
forwards 最后静止不动（保持最后一帧）
backwards （需配合延迟属性）立即应用第一个关键帧的样式，延迟结束后，执行动画
是否暂停（animation-play-state）
running 恢复运行动画
paused 暂停动画
