摘要：本文主要介紹中的函數。在執行動畫時默認以函數進行過渡，會在每個關鍵幀之間插入補間動畫，所以動畫效果是連貫的。因此并非作用于整個動畫，而是作用于每兩個關鍵幀之間，與動畫的時長播放次數等都無關，所以整個動畫的執行時間還是中設定的。

利用 CSS3 的 Animation 可以創建動畫，在許多頁面中能夠替代 Flash、JS 等，提升頁面加載速度。眾所周知，Animation 有 8 大屬性，如下所述：

以上這 8 個屬性就決定了 Animation 能夠實現一個什么樣的動畫效果。?

本文主要介紹 timing-function中的steps()函數。Animation 在執行動畫時默認以 ease函數進行過渡，ease 會在每個關鍵幀之間插入補間動畫，所以動畫效果是連貫的。
除了ease函數之外，linear和cubic-bezier（貝塞爾曲線）等過渡函數也會為其插入補間動畫。

但有的時候某些效果不需要補間，只需要在關鍵幀之間進行跳躍，這時就用到了steps()過渡方式。

steps()是 Animation 中的一個timing-function函數， 能夠實現動畫的階躍式變化，而非兩個狀態間的線性過渡。?
steps() 接收兩個參數：

steps ( n, [start | end] )

第一個參數是一個正值，指定動畫分割的段數

第二個參數定義動畫執行開始點，可設定為 start 或 end，這個值為可選值，當未傳入參數時默認以 end 方式執行

大家都見過很經典的菊花 loading 效果圖，其實現原理很簡單：
一張靜態圖片，然后為其添加動畫：

設定在固定步數內旋轉(rotate) 360 度即可實現 loading 效果，具體實現方式如下：

 
    


...
.loading-dot-step {
  animation: loading 1s infinite steps(12,start);
}
@keyframes loading {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}

靜態圖片如圖所示：

給上面的靜態圖片添加動畫，steps 設定 12 步完成兩個關鍵幀間的動作軌跡，即從當前狀態旋轉 360 度，實現下面 gif 的動畫效果。

除了菊花 loading 效果，很常見的還有線性 loading，其實現方式是：
利用 timing-function 的 linear 線性過渡函數，實現圖片的連續旋轉，此時的效果在視覺上就是連續的動畫，如下圖所示：

對于兩種 loading 效果圖，第一種為 steps 方式，第二種為線性過渡方式。
兩者實現原理類似：

均在兩個關鍵幀之間將圖片從當前狀態旋轉至 360 度，當 timing-function 設置為 linear 時，從 0% 到 100% 的狀態變化為勻速線性變化；
當動作設定為 steps 時，將從 0 度旋轉至 360 度的整個動畫分為 12 步執行完，且每步之間是跳躍的，因此出現了經典的菊花 loading 效果。

steps 的執行點 start 和 end 是許多人存在疑惑的地方，誤用 start 和 end 可能會出現和理想情況下不一致的動畫效果，許多人分不清兩者的區別在哪里，下面以幾個簡單的 demo 來輔助理解這兩個屬性值的區別。

steps() 可簡化出 step-start 和 step-end 這兩個關鍵字。

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

step-end?等同 steps ( 1, end ) ，動畫分成 1 步，動畫執行時以結尾端點為開始

1、steps（1， start）

2、steps（1， end）


...
.a{
  animation:changeColor 4s infinite steps(1, start);
}
.b{
  animation:changeColor 4s infinite steps(1, end);
}
@keyframes changeColor{
  0%{ background-color: red; }
  100%{ background-color: blue; }
}

上述代碼顯示效果如下圖所示：
1、steps（1， start）

2、steps（1， end）

代碼可見，兩者設定的均為 1 步執行完動畫，實現將 div 的顏色從紅色變為藍色，但是我們看到的結果卻是不同的，這就是由于 start 和 end 兩個屬性的執行點不同造成的結果差異。

規范文檔中給出了關于 steps() 的函數圖，如下圖所示：

對比 steps 函數中的 start 和 end 兩個執行點，由上圖中步數為 1 的兩圖可見：

整個動作只有一步，在時間為 0 處，position 設置為 start 時動畫的第一步已執行完成

相同情況下，position 設置為 end ，當時間為 0 時動畫的第一步尚未開始

同樣，當步數等于 3 時，肉眼可見的 start 的執行點為第一步執行結束的位置，end 的執行點則為第一步尚未開始的位置 。由于動畫執行的步數相同但起點不同，因此動畫的結束點也不相同，設置為 start 的情況下，結束點為動畫結束的最后一步的狀態，而 end 為結束前一步的狀態。

為了更加直觀地展示兩者執行的開始點和結束點的區別，本文以橫向坐標圖的方式對執行過程進行示意：

屬性值設置為 start 時，在動畫開始后，動畫的第一段會馬上完成。以左側端點為起點，立即跳到第一個 step 的結尾處，并且保持這樣的狀態直到第一步的持續時間結束（后面的每一幀都將按照此模式來完成動畫）。

屬性值設置為 end 時，在動畫執行的每一幀中，動畫都保持當前狀態直到這一段的持續時間完成，才會跳到下一步的起點（后面的每一幀都按照這個模式來進行）。

現在可以解釋上述 demo 中兩個 div 顏色顯示不一樣的原因了，對于 steps 屬性值為 start 的 a-box，進入畫面時動畫的第一階段已經完成，因此我們不會看到紅色，直接顯示藍色；對于 steps 屬性值為 end 的 b-box，動畫保持第一幀的狀態直到結束，因此始終顯示為紅色。

并非所有的動畫都是連續的，對于某些非連續變化的效果就需要用到 steps 來實現。 例如鐘表秒針階躍式的轉動，或者在動畫中模仿人物或動物的腳印行走效果，再或者利用雪碧圖實現人物跑動的效果等等。下面詳細介紹一下人物跑動效果的實現方式。

人物奔跑 demo

...
.person {
  background: url("person.jpg") no-repeat;
  background-size: 800%;
  // 動畫名稱 持續時間 運動曲線（steps()分為幾步）循環次數
  animation: personBlast .8s steps(7) infinite; 
}
@keyframes personBlast {
  0% { background-position: left; }
  100% { background-position: right; }
}

其中 person.jpg 為人物動作分割的雪碧圖：

本文奔跑動作實現方式為將原始雪碧圖進行按圖形幀數的倍數放大，然后設定steps 為雪碧圖的幀數減 1（8 幀分為 7 步執行完），關鍵幀的動作為從 (from) 雪碧圖左側階躍式跳躍到(to)右側，最終實現下面的跑動效果：

【 注：此奔跑效果的實現方式不盡相同，此處只是其中一種，這樣做是為了讓大家更好的理解 steps 的應用場景，還有其他更友好的實現方式歡迎大家一起交流 】

對于 Animation 的 timing-function 有一個需要引起注意的點，即：

timing-function 的執行位置為兩個關鍵幀之間，而非整個動畫

此處的 timing-function 指的是本文所講的 steps 函數以及 linear、ease、cubic-bezier 等函數。
這里還是通過一個簡單的 demo 來了解這個點。首先看一下下面的動畫效果：

實現代碼為：

...
.test-a {
  animation: changeColorOne 1s steps(1) infinite;
}
.test-b {
  animation: changeColorTwo 1s steps(1) infinite;
}

@keyframes changeColorOne {
  0% { background-color: red; }
  100% { background-color: blue; }
}
@keyframes changeColorTwo {
  0% { background-color: red; }
  25%{ background-color: blue; }
  75%{ background-color: red; }
  100% { background-color: blue; }

對于 class 為 test-a 的 div，為其添加的 changeColorOne 動畫為 1 秒內完成 0% 及 100% 兩個關鍵幀之間的顏色變化，其執行位置為 0% 到 100% 之間，因此始終顯示紅色（不設置 start 還是 end 時默認為 end）

對于 test-b，changeColorTwo 的關鍵幀有 4 個，因此這時的 steps(1) 的執行位置為 0% - 25% 兩個關鍵幀中間執行一次、25% - 75% 兩個關鍵幀中間執行一次、75% - 100% 兩個關鍵幀中間執行一次，一共執行3次。由于執行點設定為 end， 因此 0% - 25% 顯示紅色，25% - 75% 顯示藍色，75% - 100% 顯示紅色，動畫整體效果即為上圖 gif 所示。

因此：steps 并非作用于整個動畫，而是作用于每兩個關鍵幀之間，與動畫的時長、播放次數等都無關，所以整個動畫的執行時間還是 Animation 中設定的 1s。

Animation 時間函數中的 steps() 確實不好理解，但是一旦掌握了它會為我們的開發工作帶來很大的效率提升，節省很多調試時間，也能幫助我們快速定位問題。 希望本文的講解可以幫助你更好的理解和使用 steps()。
感謝閱讀，歡迎互相交流！