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 暂停动画