animation-timing-function: steps() 詳解

在應用 CSS3 漸變/動畫時，有個控制時間的屬性 <animation-timing-function> 。它的取值中除了常用到的 貝薩爾曲線以外，還有個讓人比較困惑的 steps() 函數。

teps(n，start/end) 第一個參數 number 為指定的間隔數，即把動畫分為 n 步階段性展示，第二個參數默認為 end，設置最后一步的狀態，start 為結束時的狀態，end 為開始時的狀態。

steps 有兩個參數

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

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

     　　

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

1. steps(3, start)

steps() 第一個參數將動畫分割成三段。當指定躍點為 start 時，動畫在每個計時周期的起點發生階躍（即圖中 空心圓 → 實心圓 ）。 由於第一次階躍發生在第一個計時周期的起點處（0s），所以我們看到的第一步動畫（初態）就為 1/3 的狀態，因此在視覺上動畫的過程為 1/3 → 2/3 → 1 。

2. steps(3， end)

當指定躍點為 end，動畫則在每個計時周期的終點發生階躍（即圖中 空心圓 → 實心圓 ）。 由於第一次階躍發生在第一個計時周期結束時（1s），所以我們看到的初態為 0% 的狀態；而在整個動畫周期完成處（3s），雖然發生階躍跳到了 100% 的狀態，但同時動畫結束，所以 100% 的狀態不可視。因此在視覺上動畫的過程為 0 → 1/3 → 2/3 。

最后還是得說這個屬性用到的不多，只有一些跳躍性的動畫才會用到。

新手剛來，大家指點指點！！！