CSS3骚样式之二
名为动画，有多会玩就有多骚。
animation
1、animation-name
指定要绑定到选择器的动画的名称
创建一个动画，为动画取名为ball：
@keyframes ball{内容}
调用：
animation-name:ball;
2、animation-duration
定义动画完成一个周期需要多少秒或毫秒
animation-duration:2s;
3、animation-timing-function
指定动画在时间内将如何完成一个周期
| linear | 动画从头到尾的速度是相同的 |
| ease | 默认值，动画以低速开始，然后加快，在结束前变慢 |
| ease-in | 动画以低速开始 |
| ease-out | 动画以低速结束 |
| ease-in-out | 动画以低速开始和结束 |
| cubic-bezier(n,n,n,n) | 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值 |
注：animation-timing-function使用的数学函数，称为三次贝塞尔曲线，速度曲线。上面为预先定义的值，也可以自己定义。
4、animation-delay
定义动画开始前等待的时间，以秒或毫秒计，默认值为0，允许负值，-2s 使动画马上开始，但跳过 2 秒进入动画。
5、animation-iteration-count
定义动画应该播放多少次，可以为数字次数或infinite无限次。
6、animation-direction
定义是否循环交替反向播放动画。
| normal | 默认值，动画按正常播放 |
| reverse | 动画反向播放 |
| alternate | 动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放 |
| alternate-reverse | 动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放 |
7、animation-fill-mode
规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
感觉这个用不大上，就列两个值：
| none | 默认值，动画在动画执行之前和之后不会应用任何样式到目标元素 |
| forwards | 在动画结束后（由 animation-iteration-count 决定），动画将应用该属性值 |
8、animation-play-state
指定动画是否正在运行或已暂停。
| paused | 指定暂停动画 |
| running | 指定运行动画 |