CSS3 timing-function: steps()介紹

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

       steps 函數指定了一個階躍函數，第一個參數指定了時間函數中的間隔數量（必須是正整數）；第二個參數可選，接受 start 和 end 兩個值，指定在每個間隔的起點或是終點發生階躍變化，默認爲 end。

#demo {
  animation-iteration-count: 2;//動畫重複兩次
  animation-duration: 3s;//每次動畫持續時間爲3s
}

        我們分別對它應用 steps(3, start) 和 steps(3, end)，做出階躍函數曲線如下：

1.取steps(3, start)

       第一個參數將動畫劃分爲了三個部分。第二個參數“start”，指定在每個部分的開始發生階躍變化，即圖中實心圓處。動畫的過程就是：1/3時的狀態→2/3時狀態→最後的狀態。

       這裏寫了個最簡單的demo，將一個盒子分5步從紅色變爲白色。在這個demo中你可以看到最後的狀態爲白色：http://runjs.cn/detail/mqbdpite

2.取 steps(3, end)

       與steps(3, start)不同的是，動畫的過程是：初始狀態→1/3時狀態→2/3狀態。也就是說定義的最終狀態並不會顯示出來，而是顯示結束前1/3時間段的狀態。我們同樣通過demo來觀察：http://runjs.cn/detail/77frfllv。同樣是由紅色變爲白色，但是最後的狀態並不是白色。

       附件中的demo是結合“雪碧圖”(見鏈接http://km.oa.com/group/23033/articles/show/226032)和steps()實現一個小男孩奔跑的動畫。

@keyframes animate {
  to {
    background-position: -3420px;
  }
}
.kai.animate {
  animation: animate 0.75s steps(19) infinite;
}

        動畫完整的效果是將這幅圖在0.75s內，分19次（雪碧圖上剛好有小男孩19個動作），水平方向向左移動3420px（圖像的寬度）。

        快去下附件，讓你的男孩跑起來。