本文主要介绍css动画相关的属性：transition和animation。
1. transition(过渡)
transition的属性包括以下几个：
transition-property: height; // 变化的属性
transition-duration: 1s; // 变化的时间
transition-delay: 1s; // 事件发出后 变化开始的延时
transition-timing-function: ease; // 变化的类型函数
完整写法：
transition: 1s 1s height ease
注意事项：
- 不是所有的css属性都支持transition。
- transition需要明确知道开始状态和结束状态的具体数值，才能计算出中间状态。如开始或结束的设置是
height: auto，那么就不会产生动画效果。类似的情况还有，display:none到display:block，background: url(foo.jpg)到background: url(bar.jpg)等。
局限
- transition是一次性的，不能重复发生，除非一再触发。
- transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态
2. Animation(动画)
Animation的属性包括以下几个：
animation-name: rainbow; // 名称
animation-duration: 1s; // 时长
animation-timing-function: linear; // 变换函数
animation-delay: 1s; // 延时
animation-fill-mode:forwards; // 动画结束后的状态
animation-direction: normal; // 动画播放的方向 影响循环播放的效果
animation-iteration-count: 3; // 循环播放的次数
完整写法：
animation: 1s 1s rainbow linear 3 forwards normal;
animation-fill-mode
动画结束以后，会立即从结束状态跳回到起始状态。如果想让动画保持在结束状态，需要使用animation-fill-mode属性。
可以设定的值：
- none：默认值，回到动画没开始时的状态
- forwards：动画停留在结束状态
- backwards：让动画回到第一帧的状态
- both：根据animation-direction轮流应用forwards和backwards规则
animation-direction
动画循环播放时，每次都是从结束状态跳回到起始状态，再开始播放。animation-direction属性，可以改变这种行为。
可以取值为：normal、alternate、reverse、alternate-reverse，他们对应的效果如下：
Paste_Image.png
animation-play-state
animation-play-state 是独立于animation的一个单独的属性。动画播放时突然停止，这时默认行为是跳回到动画的开始状态，如果想让动画保持突然终止时的状态，就要使用animation-play-state属性。
div {
animation: spin 1s linear infinite;
animation-play-state: paused;
}
div:hover {
animation-play-state: running;
}
停止时设为paused，运行时设置为running，就可以继续上一个状态继续运行动画。
