1. 动画的定义
动画是指由许多帧静止的画面，以一定的速度（如每秒16张）连续播放时，肉眼因视觉残象产生错觉，而误以为画面活动的作品。为了得到活动的画面，每个画面之间都会有细微的改变。
想要在网页中得到动画，如果每一帧都由开发者自己设计，费时费力。css 的动画不像flash一样需要每一帧都来自己设定, h5和css3的到来就不需要用flash来做动画了, css3为我们提供了两个属性来辅助生成动画：分别是transition过渡和animation动画，而transition过渡属性与animation动画属性可以帮助我们自动地生成动画关键帧。
动画可以分为两类
1.触发式动画 hover(一共会触发两次动画, 一次是第一帧到最后一帧, 另一次是最后一帧到第一帧) checked acitve
2.主动式动画 顾名思义就是他自己会动的动画, 不需要我们手动去触发,当元素添加了这个动画以后,页面刷新或者元素出现的一瞬间他就立马执行这个动画。
主动式动画必备的几个要素
1. 动画的关键帧 (需要手动来规定动画的第一帧和最后一帧,以及中间帧)
2. 动画需要动画的时长
3. 动画需要有自己的名字
2. transition过渡
只要是值的变化都可以支持过渡
我们需要指定动画的第一帧与最后一帧，然后由transition自动生成中间的动画帧。
也就是说需要元素的属性发生改变，配合transition即可得到动画。而我们学习过的能使元素属性改变的是一些状态类的伪类选择器，比如:hover，另外通常我们还会配合JavaScript来展示过渡。
来看一个简单的案例：
<style>
#wrap{
width: 100px;
height: 100px;
background-color: red;
transition: 2s;
}
/*width 和 背景色的变化会在2s内完成*/
#wrap:hover{
width: 200px;
background-color: blue;
}
</style>
<div id="wrap"></div>
transition分解属性
（transition:过渡属性 过渡时长 速度曲线 延迟时长;）
transition-property
哪个属性需要过渡。默认值为all：表示全部属性都应用过渡。
书写方式 transition-property:属性1,属性2;
transition-duration
过渡必备的属性 :
动画时长
transition-duration:
值可以是s秒或者ms毫秒
1s = 1000ms
过渡持续时间。通常用秒s或者毫秒ms作单位。默认值0，所以这一项是必须的，否则跟瞬间变化没有区别。
transition-timing-function
定义过渡的速度曲线。默认值ease。
| 值 | 描述 |
|---|---|
| linear | 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)） |
| ease | 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)） |
| ease-in | 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)） |
| ease-out | 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)） |
| ease-in-out | 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)） |
| cubic-bezier(*n*,*n*,*n*,*n*) | 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。 |
贝赛尔曲线在线生成器地址：https://cubic-bezier.com/
transition-delay
过渡延迟多久后开始执行。通常用秒s或者毫秒ms作单位，默认值是0。
多属性分开设置
如果针对不同属性需要有不同的过渡设置，可以使用逗号分隔开：
transition: width 1stransition-timing , background-color 5s;动画运动曲线
linear规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。ease规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。ease-in规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。ease-out规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。ease-in-out规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。cubic-bezier(n,n,n,n)在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
3. animation动画
与transition不同的是，animation可以定义好关键帧然后主动地执行动画。
定义关键帧
@keyframes xxx{ /*xxx为自定义的动画名，可以按照见名知意的原则进行命名*/
0%{/*第一帧*/
width: 100px;
}
30%{/*中间帧会自动生成，也可按照需要自行补帧*/
width: 0px;
}
100%{/*最后一帧*/
width: 500px;
}
}调用动画
#wrap{
width: 100px;
height: 200px;
background-color: red;
animation: xxx 5s;/*在5s的时间内，完成xxx指定的动画*/
}animation分解属性
（animation: name duration timing-function delay iteration-count direction;）
animation-name
调用哪一个动画（哪一个@keyframes）。默认值none，所以必须设置对应动画名。
animation-duration
动画持续时间。通常用秒s 或者 毫秒ms作单位。默认值0，所以这一项是必须的，否则跟瞬间变化没有区别。
animation-timing-function
动画的速度曲线。同transition-timing-function的取值一样。
animation-delay
动画延迟多久后执行。通常用秒s 或者 毫秒ms作单位。默认值0。
animation-iteration-count
规定动画的播放次数，默认值 1 。如果想要无限循环则设置值为 infinite 。
animation-direction
规定动画是否反向播放，默认值normal。如果需要反向播放则设置值为 alternate 。
alternate-reverse 起点就方向播放然后到终点再反向回来
reverse 一直反向播放
当设置了反向播放时，动画的播放次数必须大于 1，才能生效。因为第一次播放是不会反向的，第二次播放才会反向，所以动画播放次数起码是2次，才能看到反向效果。
动画运行状态
animation-play-state:running(播放)/ paused(停止)
animation-fill-mode
animation-fill-mode用于规定动画在播放之前或之后，其动画效果是否可见。
| 值 | 描述 |
|---|---|
| none | 默认值，不改变默认行为（delay期间保持初始状态，播放完之后会到初始状态）。 |
| forwards | 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。// 保留最后一帧 |
| backwards | 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。 //回到第一帧 |
| both | 向前和向后填充模式都被应用。 |
（PS：要搞清楚，元素的初始状态和动画的第一帧并不一定是一样的。）
css3中的animation动画复合属性：name(绑定的动画名称) duration(完成时间) timing-function(运动曲线) delay(启动前间隔) iteration-count(播放次数) direction(是否反向) fill-mode(不播放时的样式) play-state(运行或暂停)
4. 注意事项
并不是所有属性都能产生动画效果（比如display、z-index等等），只有确切的数值到数值的变化，或者颜色到颜色的变化，才能拥有动画效果。visibility: hidden; display: none;
这些属性是不支持动画的，举例：
<style>
#wrap{
width: 100px;
height: 200px;
background-color: pink;
position: relative;
transition: 1s;
}
#wrap:hover{
top: 20px;/*这里并不会产生动画，因为 top的初始值是auto， auto变到20px并不是一个数值到数值的变化，所以没法产生动画*/
}
</style>
<div id="wrap"></div>