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

willin 發布于2019-08-02 15:11 / 2968人閱讀

摘要：通過從到位移的改變，將一組動畫幀組成一個連續的動畫。其余的動畫幀將均勻的分部在兩個狀態的中間。例如會將整個動畫平均分配為三個動畫幀，即，和。

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函數值，所以我們僅僅是用于學習實驗，不要將它們使用在實際項目中。

云服務器 GPU云服務器你不知道的你不知道的javascript 你不知道的javascript上卷你不知道

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/53956.html

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

摘要：通過從到位移的改變，將一組動畫幀組成一個連續的動畫。其余的動畫幀將均勻的分部在兩個狀態的中間。例如會將整個動畫平均分配為三個動畫幀，即，和。 CSS動畫中有一個animation-timing-function屬性，它的取值除了ease，linear，cubic-bezier之外，還有一個steps()階躍函數，這篇文章我們來討論steps()函數新增的四種取值。到目前為止，這新增的幾...

mingde 2019-08-30 11:04 評論0 收藏0
跳起來：你不知道的CSS Animation新的Steps()值

摘要：通過從到位移的改變，將一組動畫幀組成一個連續的動畫。其余的動畫幀將均勻的分部在兩個狀態的中間。例如會將整個動畫平均分配為三個動畫幀，即，和。 CSS動畫中有一個animation-timing-function屬性，它的取值除了ease，linear，cubic-bezier之外，還有一個steps()階躍函數，這篇文章我們來討論steps()函數新增的四種取值。到目前為止，這新增的幾...

高勝山 2019-08-23 17:55 評論0 收藏0
哪些你知道或不知道的css，在這里或許都齊全

摘要：簡單就意味著更快的開發速度，更小的維護成本，同時往往具有更好的體驗下面我介紹哪些或許你不知道小技巧。默認為，此時陰影與元素同樣大。如果沒有指定，則由瀏覽器決定通常是的值，不過目前取透明。首先，我們要明白這里的最小寬度值是什么意思。暑假實習的時候帶我的師傅，告訴我要注重基礎，底層實現原理。才能在日新月異的技術行業站住腳跟，以不變應萬變，萬丈高樓平地起，所以我們應該不斷的去學習，去交流。...

Jackwoo 2019-08-30 13:50 評論0 收藏0
哪些你知道或不知道的css，在這里或許都齊全

摘要：簡單就意味著更快的開發速度，更小的維護成本，同時往往具有更好的體驗下面我介紹哪些或許你不知道小技巧。默認為，此時陰影與元素同樣大。如果沒有指定，則由瀏覽器決定通常是的值，不過目前取透明。首先，我們要明白這里的最小寬度值是什么意思。暑假實習的時候帶我的師傅，告訴我要注重基礎，底層實現原理。才能在日新月異的技術行業站住腳跟，以不變應萬變，萬丈高樓平地起，所以我們應該不斷的去學習，去交流。...

Bryan 2019-08-21 17:13 評論0 收藏0
哪些你知道或不知道的css，在這里或許都齊全

摘要：簡單就意味著更快的開發速度，更小的維護成本，同時往往具有更好的體驗下面我介紹哪些或許你不知道小技巧。默認為，此時陰影與元素同樣大。如果沒有指定，則由瀏覽器決定通常是的值，不過目前取透明。首先，我們要明白這里的最小寬度值是什么意思。暑假實習的時候帶我的師傅，告訴我要注重基礎，底層實現原理。才能在日新月異的技術行業站住腳跟，以不變應萬變，萬丈高樓平地起，所以我們應該不斷的去學習，去交流。...

fai1017 2019-08-01 17:51 評論0 收藏0