css3的animation属性

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帧的人物行走的各部分展示图，动画定义开始到结束的状态，剩下的交给属性去完成；