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