css3动画中的steps值详解

css3的动画的animation-timing-function属性定义了动画的速度曲线,一般的速度曲线大家都知道,什么ease,linear,ease-in,ease-out,还有自定义贝塞尔曲线...定义了animation-timing-function后,动画就会按照定义的曲线来执行动画.

但是除了这些值以外,animation-timing-function值还可以是steps(x,startend),它接受两个参数.下面会具体解释.

如果定义曲线,则动画帧与帧之间会流畅的进行,而定义steps,则表示直接跳跃进行,动画直接从一个帧切换到另一个帧.

举个栗子:

    <style>
        div {
            width:200px;
            height:600px;
            background:#C0DCC0;
            margin-left:0;
            -webkit-animation:ani 10s steps(1,end);
        }
        @-webkit-keyframes ani {
            0%   {
                margin-left:0px
            }
            50%  {
                margin-left:100px
            }
            100% {
                margin-left:200px
            }
        }
    </style>

 

有这样一个div,给它定义一个动画改变margin-left值,如果把steps(1,end)改成ease,就会流畅的动画,元素缓缓的移动.

但如果定义成steps(1,end),那么整个动画就会分为三帧,0%,50%,100%,元素会一下子移动到100px,再一下子移动到200px,具体效果可以点击这里试一下: demo

仔细观察: 元素从0px开始,过了5s后移动到了100px,过了10s后又回到了0px...

然后把'end'改为'start'再观察: 元素从100px开始,过了5s后移动到了200px,过了10s后又回到了100px... 

这就解释了steps的第二个参数startend的作用,它定义了动画开始的状态,比如这里10s,那么从0%到50%间隔是5s,而改变只需要一瞬间,那么到底是在5s的开始改变,还是在5s的结束时发生改变呢? 这就需要第二个参数去决定.

如果是start,就是在开始的时候改变,如果是end,就是在结束的时候改变.

再来看steps的第一个参数x,它是一个数字.还是拿刚才的demo举例子.在x为1的时候,5s的时间,元素从margin-left:0直接变成margin-left:100px.尝试把x改为2,可以看到,同样在5s的时间,元素先从margin-left:0,移动到了margin-left:50px的位置,然后再移动到margin-left:100px.所以,x这个参数的意思就是: 帧与帧之间的切换分为x步执行.