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步執行.