学习CSS也有一段时间了，现在来对CSS的动画部分知识进行回顾
讲到CSS动画之前，我们先来讲一下浏览器的渲染情况。
1.浏览器渲染原理
在日常生活中，我们打开一个浏览器，搜索相关信息，点击搜索后很快就加载出结果，打开页面，这个普通人司空见惯的事情，但背后涉及到了比较复杂的浏览器的运行原理。
用户在进行一个搜索时，其实是发起了一次请求，浏览器向服务器发送请求，然后把请求的结果反馈，返回一个包含页面所有信息的文件交给浏览器，浏览器进行渲染处理。
- 首先浏览器先解析HTML文件，将HTML文件渲染为一颗文档树，也就是对HTML进行结构haul的表述，称为DOM。
- 然后解析css文件，将css文件渲染为一棵装饰树，CSSOM
- 随后浏览器把两者进行合成，变成一颗render tree.
- 然后根据渲染树来进行页面的布局layout，以计算每个节点的信息，包括文档流，盒模型，计算元素的元素位置等。
- 然后将各个节点绘制prant到屏幕上,把边框颜色、文字颜色、阴影等画出来.
- 然后进行合成composite，把各个图层合并成一个完整的页面，根据层叠关系展示出来，最终也就是大家常看到的页面了
整体的流程如下：
2 CSS动画
讲完了浏览器的渲染相关知识，我们来讲一下CSS的动画。CSS动画包含了几个不同的样式
2.1 transition 过渡
过渡是CSS3中新增的非常重要的功能，可以通过设置transition属性，来设置样式生效的时间，和延迟时间等，它可以为一个元素在不同时间切换制定义不同的效果，它是其他几个属性的简写属性：
1. transition-property 过渡属性名称
设置要进行过渡的属性，比如元素的height weight等
2. transition-duration 过渡时间
可以是秒 s或者毫秒 ms>
3. transition-timing-function 过渡的样式
设置元素的过渡样式，有一下几种样式
* linear 线性过渡
* ease 慢开始加速然后慢结束
* ease-in 慢入快出
* ease-out 快入慢出
* ease-in-out 以慢开始和以慢结束的
* cubic-beizer 可以传入贝塞尔曲线
4. transition-delay 延迟时间
这个就是属性延迟生效的时间，比如延迟3s后生效，等等
一般我们机会不会把属性分开写，都是把内容合写起来：
例：
transition： height 1s ease-in 1s
上面这句话的例子是，高度在等待1秒钟后发生慢入快出的变化持续时间1秒钟。
##2.2 animation 动画
动画是CSS3中最重要的属性，可以实现各种复杂的效果
使用animation首先需要定义动画过程，也就是关键帧,关键帧定义动画的动画效果。
@keyframes 动画名称{
from{
设置属性 如
background-color：black
}
to{
background-color：blue
}
}
以上的意思就是对背景设置效果，把背景颜色通过黑色变成蓝色， 然后设置animation，设置元素背景变化的过程： animation其实也是一个缩写的属性，它包含很多属性：
1. animation-name 动画名称，这个可以随意设置名称，
2. animation-duration, 持续时长，动画的持续时长
3. animation-timing-function 动画过渡效果，跟transition中是一样的。
4. animation-delay 也是和transition中一样，延迟的时间
5. animation-iteration-count 定义动画在结束前运行的次数，可以是1 也可以是infinity，就是无限次不停运动
6. animation-direction， 设置动画的的运行方向，它有几个属性值
* normal 正常
* alternative 动画交替反向运行
* reverse 反向运行动画
* alternate-reverse 反向开始交替
7. animation-fill-mode 使用的比较少
8. animation-play-state 使用的比较少
比如：
animation: 3s ease-in 1s 2 reverse both paused slidein;
就设置了背景从黑变成蓝色经过的方法。
后记：CSS动画包含的内容非常多，必须要通过大量重复性的练习，才能够真正掌握，如果只是想通过看或者死记硬背来记住，那是根本不可能的结果。
