W3C裏的定義：

animation-timing-function 規定動畫的速度曲線。

這個屬性有很多取值，

linear：
線性過渡。等同於貝塞爾曲線(0.0, 0.0, 1.0, 1.0)
ease：
平滑過渡。等同於貝塞爾曲線(0.25, 0.1, 0.25, 1.0)
ease-in：
由慢到快。等同於貝塞爾曲線(0.42, 0, 1.0, 1.0)
ease-out：
由快到慢。等同於貝塞爾曲線(0, 0, 0.58, 1.0)
ease-in-out：
由慢到快再到慢。等同於貝塞爾曲線(0.42, 0, 0.58, 1.0)
step-start：
等同於 steps(1, start)
step-end：
等同於 steps(1, end)
steps(
 
<integer>[, [ start | end ] ]?)：
接受兩個參數的步進函數。第一個參數必須為正整數，指定函數的步數。第二個參數取值可以是start或end，指定每一步的值發生變化的時間點。第二個參數是可選的，默認值為end。
cubic-bezier(<number>, <number>, <number>, <number>)：
特定的貝塞爾曲線類型，4個數值需在[0, 1]區間內

然後今天我想巴拉的是steps(1,start)和steps(1,end)的區別；

首先，

steps(<integer>[, [ start | end ] ]?)：

接受兩個參數的步進函數。

第一個參數必須為正整數，指定了函數中的間隔數量。

第二個參數取值可以是start或end，指定每一步的值發生變化的時間點。

第二個參數是可選的，默認值為end。

step-start等同於steps(1,start)，動畫分成1步，動畫執行時為開始左側端點的部分為開始；

step-end等同於steps(1,end)：動畫分成一步，動畫執行時以結尾端點為開始，默認值為end。

上例子吧！

　　.bird{
　　　　min-width: 91px;
　　　　min-height: 71px;
　　　　background: url(../img/bird.png) -182px 0px no-repeat;
　　}

.birdFly {
    animation: bird-slow 900ms infinite steps(1,start);
}
@keyframes bird-slow{
    0% {
        background-position: -182px 0px;//第三只小鳥
    }
    50% {
        background-position: 0px 0px;//第一只小鳥
    }
    75% {
        background-position: -91px 0px;//第二只小鳥
    }
    100% {
        background-position: -182px 0px;//第三只小鳥
    }
}

圖片是這張雪碧圖；動畫效果就是模擬小鳥展翅飛翔，一直扇動翅膀；默認是先顯示第三只小鳥

steps(1,start);第一個參數為1的意思就是，每倆關鍵幀之間只要1步完成，也就是0%-50%，只分為一步完成，50%-75%，也是一步完成；以此類推；註意steps的設置都是針對兩個關鍵幀之間的，而非是整個keyframes；

timing-function 作用於每兩個關鍵幀之間，而不是整個動畫。

steps(1,start) ： 第一只鳥和第二只鳥相互切換

steps(1,end) ： 第三只鳥和第一只鳥相互切換

start跳過0%，end跳過100%

step-start在變化過程中，都是以下一幀的顯示效果來填充間隔動畫，所以0% 到 50% 直接就顯示了第一只鳥

step-end與上面相反，都是以上一幀的顯示效果來填充間隔動畫，所以0% 到 50% 直接就顯示了第三只鳥

然後思考下，此時我們設置成start，小鳥會是怎樣的呢？

答案是：

start:進入頁面就會顯示第一只小鳥，因為跳過了0%；

end:進入頁面就會顯示第三只小鳥，因為跳過了100%；

所以如果你一進來想顯示小鳥展翅的樣子就得是start,如果是一進來展示小鳥收翅膀的樣子，那就設置成end;

個人覺得一進來看到小鳥展翅的樣子還是比較喜歡的，哇哈哈哈、

再說下"forwards"和"infinite"

使用"forwards"和"infinite"對步數的的作用是不同的。

如果我們改變成"infinite"，將不會出現"100%",因為"forwards"命令使動畫在我們設置的步數外添加了額外的一步。

"forwards"使動畫保持結束時的狀態，所以在步數執行完畢後，動畫會跳到最後一幀的狀態並保持不變。

（做那種雨滴滴下來，然後種子就發芽，然後就長成了參天大樹，就定格到最後一幀的大樹的效果；animation: grow 5000ms forwards steps(20);這裏的steps是你的雪碧圖裏的圖片的數量減一哦）

總結：

steps函數，它可以傳入兩個參數，第一個是分成多少步完成，第二個參數可選，決定顯示效果（是上一幀填充還是下一幀填充）；

steps的設置都是針對兩個關鍵幀之間的，而非是整個keyframes；

timing-function 作用於每兩個關鍵幀之間，而不是整個動畫；

"forwards"命令使動畫在我們設置的步數外添加了額外的一步。

animation-timing-function的steps詳解