一、不堪回首的過往

在應用 CSS3 漸變/動畫時，有個控制時間的屬性 <timing-function> 。它的取值中除了常用到的 三次貝塞爾曲線 以外，還有個讓人比較困惑的 steps() 函式。在許多相關文章裡，關於這個函式的解釋都比較含糊其辭，比如：

steps() 第一個引數 number 為指定的間隔數，即把動畫分為 n 步階段性展示，第二個引數預設為 end，設定最後一步的狀態，start 為結束時的狀態，end 為開始時的狀態。

又如：

steps 有兩個引數

1. 第一個肯定是分幾步執行完
2. 第二個有兩個值
   • start 第一幀是第一步動畫結束
   • end 第一幀是第一步動畫開始

年少無知的我輕易就相信了大家的說法，每次應用 steps() 函式時都要先考慮一番：嗯，start 對應末態，end 對應初態，末態是 OOOO，初態是 XXXX……臥槽！跑起來不對！

二、一探究竟

被坑得團團轉之後，只好向組織求助。於是查到了這樣的 規定 ：

steps

Specifies a stepping function, described above, taking two parameters. The first parameter specifies the number of intervals in the function. It must be a positive integer (greater than 0). The second parameter, which is optional, is either the value ‘start’ or ‘end’, and specifies the point at which the change of values occur within the interval. If the second parameter is omitted, it is given the value ‘end’.

粗略翻譯如下： steps 函式指定了一個階躍函式，第一個引數指定了時間函式中的間隔數量（必須是正整數）；第二個引數可選，接受 start 和 end 兩個值，指定在每個間隔的起點或是終點發生階躍變化，預設為 end。

這樣理解起來可能還是有點抽象，我們來個例項：

#demo {
  animation-iteration-count: 2;
  animation-duration: 3s;
}

這是一個 3s * 2 的動畫，我們分別對它應用 steps(3, start) 和 steps(3, end) ，做出階躍函式曲線如下：

1. steps(3, start)

steps() 第一個引數將動畫分割成三段。當指定躍點為 start 時，動畫在每個計時週期的起點發生階躍（即圖中 空心圓 → 實心圓

var animateAtStart = function (steps, duration) {
var current = 0;
var interval = duration / steps;
var timer = function () {
current++;
applyStylesAtStep(current);
if (current < steps) {
setTimeout(timer, interval);
}
};
timer();
};

2. steps(3， end)

當指定躍點為 end，動畫則在每個計時週期的終點發生階躍（即圖中 空心圓 → 實心圓 ）。 由於第一次階躍發生在第一個計時週期結束時（1s），所以我們看到的初態為 0% 的狀態；而在整個動畫週期完成處（3s），雖然發生階躍跳到了 100% 的狀態，但同時動畫結束，所以 100% 的狀態不可視。因此在視覺上動畫的過程為 0 → 1/3 → 2/3 （回憶一下數電裡的非同步清零，當所有輸出端都為高電平的時候觸發清零，所以全為高電平是暫態）。同樣翻譯成 JavaScript 如下：

var animateAtEnd = function (steps, duration) {
var current = 0;
var interval = duration / steps;
var timer = function () {
applyStylesAtStep(current);
current++;
if (current < steps) {
setTimeout(timer, interval);
}
};
timer();
};

如果這樣的解釋還是讓你覺得雲裡霧裡，可以參考這個互動 DEMO

三、實際應用

雖然寫了這麼多，但還是不得不說一句 timing-function: steps() 在實際設計中的應用少之又少，但是配合一些奇淫技巧還是能做出一些不錯的效果：

1. 定時遮罩

在CSS3 環形進度條這篇文章裡，我們曾用到 timing-function 來使半圓環定時顯示/隱藏：

$precent: 5; // 進度百分比
$duration: 2s; // 動畫時長
@keyframes toggle {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.progress-right {
// 初態為 opacity: 0; 動畫週期結束後為 opacity: 1;
opacity: 1;
animation: toggle ($duration * 50 / $precent) step-end; // step-end = steps(1, end)
}
.progress-cover {
// 初態為 opacity: 1; 動畫週期結束後為 opacity: 0;
opacity: 0;
animation: toggle ($duration * 50 / $precent) step-start; // step-start = steps(1, start)
}

這裡的關鍵是使用了 step-start 與 step-end 控制動畫，因為動畫只有兩個關鍵幀，參考上文可以得出：

step-start：動畫一開始就跳到 100% 直到週期結束

step-end：保持 0% 的樣式直到週期結束

>step-start, 顧名思意，“一步一步開始”，表現在動畫中就是一幀一幀播放、一頓一頓畫面

2. Sprite 精靈動畫

在CSS3 實現奔跑動畫這篇文章裡，我們使用 CSS3 Animation 來實現遊戲開發中的精靈動畫：

$spriteWidth: 140px; // 精靈寬度 
@keyframes run {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -($spriteWidth * 12) 0; // 12幀
  }
}
#sprite {
  width: $spriteWidth;
  height: 144px;
  background: url("../images/sprite.png") 0 0 no-repeat;
  animation: run 0.6s steps(12) infinite;
}

其原理是：使用一張含有多幀靜態畫面的圖片，通過切換 background-position 使其變為連續的動畫。