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

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

以上這 8 個屬性就決定了 Animation 能夠?qū)崿F(xiàn)一個什么樣的動畫效果。?

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

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

steps()是 Animation 中的一個timing-function函數(shù)， 能夠?qū)崿F(xiàn)動畫的階躍式變化，而非兩個狀態(tài)間的線性過渡。?
steps() 接收兩個參數(shù)：

steps ( n, [start | end] )

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

第二個參數(shù)定義動畫執(zhí)行開始點，可設(shè)定為 start 或 end，這個值為可選值，當(dāng)未傳入?yún)?shù)時默認以 end 方式執(zhí)行

大家都見過很經(jīng)典的菊花 loading 效果圖，其實現(xiàn)原理很簡單：
一張靜態(tài)圖片，然后為其添加動畫：

設(shè)定在固定步數(shù)內(nèi)旋轉(zhuǎn)(rotate) 360 度即可實現(xiàn) loading 效果，具體實現(xiàn)方式如下：

 
    


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

靜態(tài)圖片如圖所示：

給上面的靜態(tài)圖片添加動畫，steps 設(shè)定 12 步完成兩個關(guān)鍵幀間的動作軌跡，即從當(dāng)前狀態(tài)旋轉(zhuǎn) 360 度，實現(xiàn)下面 gif 的動畫效果。

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

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

均在兩個關(guān)鍵幀之間將圖片從當(dāng)前狀態(tài)旋轉(zhuǎn)至 360 度，當(dāng) timing-function 設(shè)置為 linear 時，從 0% 到 100% 的狀態(tài)變化為勻速線性變化；
當(dāng)動作設(shè)定為 steps 時，將從 0 度旋轉(zhuǎn)至 360 度的整個動畫分為 12 步執(zhí)行完，且每步之間是跳躍的，因此出現(xiàn)了經(jīng)典的菊花 loading 效果。

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

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

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

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

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）

代碼可見，兩者設(shè)定的均為 1 步執(zhí)行完動畫，實現(xiàn)將 div 的顏色從紅色變?yōu)樗{色，但是我們看到的結(jié)果卻是不同的，這就是由于 start 和 end 兩個屬性的執(zhí)行點不同造成的結(jié)果差異。

規(guī)范文檔中給出了關(guān)于 steps() 的函數(shù)圖，如下圖所示：

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

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

相同情況下，position 設(shè)置為 end ，當(dāng)時間為 0 時動畫的第一步尚未開始

同樣，當(dāng)步數(shù)等于 3 時，肉眼可見的 start 的執(zhí)行點為第一步執(zhí)行結(jié)束的位置，end 的執(zhí)行點則為第一步尚未開始的位置 。由于動畫執(zhí)行的步數(shù)相同但起點不同，因此動畫的結(jié)束點也不相同，設(shè)置為 start 的情況下，結(jié)束點為動畫結(jié)束的最后一步的狀態(tài)，而 end 為結(jié)束前一步的狀態(tài)。

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

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

屬性值設(shè)置為 end 時，在動畫執(zhí)行的每一幀中，動畫都保持當(dāng)前狀態(tài)直到這一段的持續(xù)時間完成，才會跳到下一步的起點（后面的每一幀都按照這個模式來進行）。

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

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

人物奔跑 demo

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

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

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

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

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

timing-function 的執(zhí)行位置為兩個關(guān)鍵幀之間，而非整個動畫

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

實現(xiàn)代碼為：

...
.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 秒內(nèi)完成 0% 及 100% 兩個關(guān)鍵幀之間的顏色變化，其執(zhí)行位置為 0% 到 100% 之間，因此始終顯示紅色（不設(shè)置 start 還是 end 時默認為 end）

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

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

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