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