【譯】css動畫裏的steps()用法詳解

原文地址：http://designmodo.com/steps-c...
原文做者：Joni Trythall

我想你在css 動畫裏使用steps()會和我同樣有不少困惑。一開始我不清楚怎樣使用它，因而搜索出了兩個案例：typing demo by Lea Verou 和 animated sprite sheet by Simurai.

這些例子很棒，幫助我開始理解這個特別的timming function，可是它們是如此優秀的例子，以致於在demo以外仍是難以理解怎樣使用steps()。

因此，我仔細研究了steps()而且作了一些動畫demos用來幫助理解一些難點。

steps介紹

steps()是一個timing function，容許咱們將動畫或者過渡分割成段，而不是從一種狀態持續到另外一種狀態的過渡。這個函數有兩個參數——第一個參數是一個正值，指定咱們但願動畫分割的段數。

Steps(<number_of_steps>，<direction>)

第二個參數定義了這個要點 在咱們的@keyframes中申明的動做將會發生的關鍵。這個值是可選的，在沒有傳遞參數時，默認爲」end」。方向爲」start」表示一個左--持續函數，在動畫開始時，動畫的第一段將會立刻完成。以左側端點爲起點，當即跳到第一個step的結尾處。它會當即跳到第一段的結束而且保持這樣的狀態直到第一步的持續時間結束。後面的每一幀都將按照此模式來完成動畫。

方向爲」end」表示一個右--持續函數。動畫執行時，在每一幀裏，動畫保持當前狀態直到這一段的持續時間完成，纔會跳到下一步的起點，後面的每一幀都按照這個模式來進行，在最後一幀的起點，等到這一幀的持續時間結束，整個動畫的執行也已經結束，執行動畫的元素來不及跳到這一幀的終點，直接回到了整個動畫起點，開始了第二次動畫。每一個選擇本質上從一個不一樣的面移動這個元素而且將產生一個不一樣的位置在這個相同的動畫裏。
這面是示例圖：

動態解析圖以下：

填充模式和迭代次數的影響

在咱們開始前，明白一個不一樣的填充模式或者迭代次數將會怎樣影響steps()是很是重要的，例如」forwards」或者」infinite」的使用。若是咱們有兩輛車，使用相同的動畫持續時間、相同的steps()值，可是其中一個設置（infinite），另外一個填充（forward）,終點的這兩輛汽車看起來很是不一樣，即便他們從相同的軸點出發。

「forwards」的命令使這個動畫元素保持着@keyframes裏最後一個動畫樣式。在動畫，裏將它與steps()聯繫使這個動做出現，好像初始的靜止狀態沒有計算到總的步數裏。當它是」end」，好像這個車行駛了額外的步數超出了你的steps()的聲明，取決於你怎樣看待它。

這些講解聽起來仍是很散亂，可是咱們將在demos裏慢慢講解。（demo地址：http://designmodo.com/demo/st...）如今最重要的事情是留心這些變化將會怎樣影響你的意圖和steps數。下面是infinite VS forwards車：

steps demos

你能夠點擊這裏查看demos,它由如下幾個部分組成：

• 純css實現的鬧鐘

• 一些節能的css車

• 前進的熊爪印

• 純css實現的進度圓

css鬧鐘

一個應用了steps()的鬧鐘演示。咱們須要鬧鐘的指針旋轉起來，可是不是圓滑連續的運動。使用steps()將容許咱們模仿真實的鬧鐘的運動。

這裏涉及到了一些數學知識，可是還不是很痛苦。咱們須要秒針經過60步完成360度的旋轉在60s的時間裏。

分針咱們能夠應用相同的@keyframes,只有改變更畫的執行時間便可。分針轉一圈，爲3600s,即分針在3600s裏，完成60步。

申明：這只是一個css鬧鐘，並不能依賴這個鬧鐘來執行你的平常活動。

css cars

css車演示了在steps()裏使用"end"和"start"的不一樣。"start"使小車當即移動到一步的結束處並保持當前狀態直到這一步的持續時間結束。看起來就好像使用了"start"的車的位置比使用"end"的車的位置更遠，可是若是你給這兩輛小車添加一個動畫的延遲，你能夠看到它們是從相同的起點出發的。

"end"會等到每一步的執行時間結束纔會開始動畫。第一輛車移動的時候，這是它的第二步，因此這兩輛車沒有機會同步移動。動畫裏白色的邊框是動畫當前的起始位置。

熊腳印

另外一種更好的理解stpes()的方法是建立真實的步數。這個案例咱們將會使用熊腳印。這個演示使用了由六個腳印組成的圖片。這個圖片被一個<div>覆蓋，咱們要用steps()移動這個<div>來顯示出腳印，用來模仿實際的腳印。

沒有使用steps()時，<div>將平滑的向右移動，這不是咱們想要的效果。咱們但願每一個腳印能夠當即完整的出現。

有六個腳印，咱們須要向右移動<div>的長度爲圖片的整個寬度。

咱們的<div>將向右移動675px在7秒7步的時間裏。每一步是96px寬。"end"表示咱們的動畫將保持它的初始狀態，覆蓋揚劇有的腳印直到第一步完成。

css進度圓

在這個演示裏咱們使用"start"來動態改變不透明度。使用"start"製做一個百分比的可見度的變化。

全部的百分數在同一個<div>裏，咱們將這個<div>經過動畫向上移動380px；初始值是"20%",咱們須要經過四步移動<div>使數值爲40%,60%,80%到最後的100%。

再次強調，使用"forwards"和"infinite"對步數的的做用是不一樣的。若是咱們改變成"infinite"，將不會出現"100%",由於"forwards"命令使動畫在咱們設置的步數外添加了額外的一步。"forwards"使動畫保持結束時的狀態，因此在步數執行完畢後，動畫會跳到最後一幀的狀態並保持不變。

結束語

steps() timing function確實難以理解，可是一旦你掌握它了，就會有不少便利。css function 容許咱們將動畫切割成清楚的步數，或者建立平滑的動畫效果。但願這些demos能夠幫助你在動畫裏更好的理解使用steps()。