浏览器渲染原理
在不考虑各种协议的情况下，浏览器渲染页面可以简单理解为下面几步：
- 解析HTML，并构建DOM树
- 解析CSS，构建CSSOM树
- 将DOM树和CSSOM树合成一棵渲染树
- 根据渲染树的结果来算每个节点
- 最后显卡来合成，然后显示 用图片表示(该图片来自百度搜索)
CSS动画的两种做法
CSS动画可以用transition和animation来实现
transition,MDN描述为，过渡可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。animation,MDN描述为，animation属性用来指定一组或多组动画，每组之间用逗号相隔。
这两个属性都为缩写属性，两者属性都较多。
transition
transition-property指定应用过渡属性的名称transition-duration属性以秒或毫秒为单位指定过渡动画所需的时间。默认值为0s ，表示不出现过渡动画。transition-timing-function属性用来描述动画中的速度是怎样的，先快后慢还是先慢后快等等**transition-delay属性规定了在开始作用之前需要等待的时间。
animation
animation-name属性指定应用的一系列动画，每个名称代表一个由@keyframes定义的动画序列animation-duration属性指定一个动画周期的时长。animation-timing-function属性定义CSS动画在每一动画周期中执行的节奏animation-delay属性定义动画于何时开始，即从动画应用在元素上到动画开始的这段时间的长度animation-iteration-count属性 定义动画在结束前运行的次数，可以是1次或无限循环.animation-directionCSS 属性指示动画是否反向播放animation-fill-mode设置CSS动画在执行之前和之后如何将样式应用于其目标animation-play-state属性定义一个动画是否运行或者暂停。可以通过查询它来确定动画是否正在运行。另外，它的值可以被设置为暂停和恢复的动画的重放。
补充说明
CSS属性非常繁杂，我们无法保证记住每一个属性。我们只需要记住常用属性就可，其余等到要用时再查便可
