animation的属性大致分为以下几种
animation-name 动画名
animation-duration 动画持续的事件
animation-timing-function 动画的速度曲线，可选的值有 linear--匀速 ; ease--默认。动画以低速开始，然后加快，在结束前变慢。
ease-in--动画以低速开始。 ease-out--动画以低速结束。
ease-in-out--动画以低速开始和结束。 cubic-bezier(n,n,n,n)--贝塞尔曲线，值是从 0 到 1 的数值
同时animation-timing-function 也接受一个step（）函数 step（）接受两个参数（num ， start/end）；这里的num代表动画分几步完成
，start/end代表动画执行完是开始的状态还是结尾的状态。例：animation-timing-function:steps(9, start);
animation-delay 动画延迟几秒执行
animation-iteration-count 动画的播放次数，可选n/infinite n代表播放次数，infinite规定动画无限次循环播放
animation-direction 定义是否应该轮流反向播放动画 可选normal/alternate normal正常播放，alternate动画轮流反向播放。简单举例：
一个方块从左到右的动画，2s完成。normal是动画开始，方块从左到右移动。2s结束后。方块回到左边，在继续执行从左到右的动画。
alternate是动画开始，方块从左到右移动。2s结束后。方块直接在右边向左进行回去似的动画
animation-play-state 动画是否正在运行或暂停 paused/running
animation-fill-mode 规定动画在播放之前或之后，其动画效果是否可见; none--不改变默认行为 forwards--当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）
backwards--在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）
both--向前和向后填充模式都被应用.默认none；
上述属性写的时候都写两遍，另一遍加上-webkit-
举例一个人物行走的动画：这里讲全部用到上述属性
css代码如下：
.step {
width: 120px;
height: 134px;
background: url(../images/step.png);
-webkit-animation-timing-function:steps(9, start);
animation-timing-function:steps(9, start);
-webkit-animation-duration:.6s;
animation-duration:.6s;
-webkit-animation-name:step;
animation-name:step;
-webkit-animation-delay:.6s;
animation-delay:.6s;
animation-iteration-count:infinite;
-webkit-animation-iteration-count:infinite;
animation-direction:alternate;
-webkit-animation-direction:alternate
}
@-webkit-keyframes step {
0% {
background-position:0 0
}
100% {
background-position:1080px 0
}
}
这里的背景图是分9帧的人物行走的各部分展示图，动画定义开始到结束的状态，剩下的交给属性去完成；
