跳起來：你不知道的CSS Animation新的Steps()值

CSS動畫中有一個animation-timing-function屬性，它的取值除了ease，linear，cubic-bezier以外，還有一個steps()階躍函數，這篇文章咱們來討論steps()函數新增的四種取值。到目前爲止，這新增的幾個取值僅在Firefox 65+中可用，也就是說在其餘瀏覽器實現以前，演示只能在Firefox中實現。

steps()函數中新增的四個值是：

• jump-start
• jump-end
• jump-both
• jump-none

這些新增的值與已有的值有什麼區別？它們適合在何時使用？下面的內容將詳細介紹。

Easings和steps()函數

首先，咱們後退一步，看一看animation-timing-function屬性中easings取值和steps()函數的傳統取值。

Easings能夠改變一個transition或者animation或者Web Animations API中動畫的節奏，這個節奏是連續性的。

.mover {
  animation: move 2000ms;
  animation-timing-function: linear; /* easing */
  transform: translateX(0px);
}

@keyframes move {
  100% {
    transform: translateX(200px);
  }
}

經過一個linear easing，元素會以均勻的速度移動。若是咱們改變爲ease-in，元素的移動節奏就會變爲剛開始慢，到動畫快結束時加速變快。

Steps則不一樣，咱們能夠將動畫劃分爲特定數量的動畫幀，因此，若是改變easing爲steps(2)，那麼動畫將只有兩個動畫幀，開始幀和結束幀。

steps()函數的第二個（可選）參數指定在每一個間隔的起點或是終點發生階躍變化。以前支持start和end兩個值，如今又增長了四個新值。

Start和End

在新增的四個值中，其中有兩個實際上是原來start和end的代替值：

• jump-start === start
• jump-end === end

jump前綴幫助咱們更有效地解釋單詞start和end。當咱們使用start或jump-start時，咱們告訴動畫跳過起始位置。一樣的，使用end或jump-end時，咱們但願跳過結束位置。

你能夠將steps(n)理解爲一個linear均速移動的動畫元素按照指定的時間間隔進行快照截取，動畫的過程就是一個快照接着一個快照顯示的過程。當咱們指定一個動畫爲steps(4, jump-start)時，意味着將一個平滑的動畫過程平均劃分爲四部分，而後取每一個部分的開始狀態進行快照截取，並將這些快照顯示出來。一樣的，steps(5, jump-end)意味將一個平滑動畫平均劃分爲五個部分，取每一個部分的結束狀態進行快照截取，最後將這些快照顯示出來。

旋轉

當咱們想到時鐘上的秒針時，就能夠更清楚的認識到start和end兩個值的做用 - 秒針須要運行60秒旋轉一圈（從0度到360度），也就是steps(60)。不管使用jump-start/start仍是jump-end/end均可以實現一圈又一圈的連續旋轉，可是，若是jump-start/start和jump-end/end都顯示每一個動畫幀的起始狀態和結束狀態，那麼秒針就會在最頂部0度的位置停留兩次，這明顯是不符合常規的。

雪碧圖

steps()另外一個重要的應用是雪碧圖動畫。經過從translateX(0)到translate(-100%) 位移的改變，將一組動畫幀組成一個連續的動畫。

jump-none

與jump-start，jump-end只是命名方式的改變不一樣，這是一個新增的steps取值。

有時候咱們並不須要跳過動畫的任何一個狀態。新的取值jump-none就支持同時保留動畫的起始狀態和結束狀態。對於一個包含至少2幀的動畫來講，起始狀態和結束狀態都將會顯示出來。其他的動畫幀將均勻的分部在兩個狀態的中間。例如steps(3, jump-none)會將整個動畫平均分配爲三個動畫幀，即0%，50%和100%。

移動一個元素

一個簡單的例子就是在屏幕上移動一個元素，讓它以steps階躍的方式從A點移動到B點。之前咱們只能跳過開始狀態或者結束狀態，並無一種簡單的方法讓動畫同時顯示兩種狀態。而如今咱們有了jump-none：

使用steps()方法以前的取值，仍然可以實現這一點，可是須要作一些額外的數學計算。如今則變得簡單了，由於你知道動畫的起始狀態和結束狀態都會被顯示。

Opacity

不透明度Opacity屬性的動畫一樣能夠重新的取值jump-none中受益，假如咱們須要實現一個不透明度Opacity從0到1階躍重複變化的動畫（即閃爍效果），使用start或end值，將永遠看不到徹底不透明或徹底透明的狀態。可是jump-none則不會出現這種問題，一個被設置爲steps(2, jump-none)的動畫會實現相似on/offk的效果：

jump-both

咱們能夠跳過階躍動畫的起始狀態，能夠跳過結束狀態，能夠兩個狀態都不跳，那麼就剩下jump-both了，它表示起始和結束的兩個狀態都跳過。

我尚未想到適合這個取值的用途，若是你想到了能夠在下面評論告訴我。

瀏覽器支持

Webkit和EdgeHTML內核的瀏覽器到目前爲止還不支持新增的steps函數值，因此咱們僅僅是用於學習實驗，不要將它們使用在實際項目中。