技術標籤：CSScss3動畫圖片幀動畫

前端中的動畫效果可以有很多種方法完成，對於一些簡單的顏色、大小、長度、位置變化都可以通過transition輕鬆實現，對於一些複雜的、不規則的動畫就要藉助圖片來完成了。

今天介紹一種結合圖片和css3中的keyframes和animation實現的複雜動畫方法。

先看圖片和動畫效果，


實現的原理是通過改變背景圖片的位置，從而讓人看起來是動畫，看一下它的原始碼：

<div class="box"></div>

.box {
    width: 50px;
    height: 72px;
    background-image
 
: url("http://s.cdpn.io/79/sprite-steps.png");
    animation: play .8s steps(10) infinite;
}
@keyframes play {
   from { background-position:    0px; }
     to { background-position: -500px; }
}

可以看到keyframes裡面背景圖片的位置從0px移動到了-500px(圖片向左移動)；如果我們把steps(10)去掉並將動畫時間設定為2s，再看看是什麼效果

現在大概知道steps()的作用了吧，steps()將動畫分割成段，而不是像上面的例子一樣平滑的移動，這樣就可以通過一幀一幀的圖片實現動畫了

steps()有兩個引數，steps(number,direction)
第一個引數是表示動畫分割的段數，如上例子中是有10張圖片，分為了10幀，所以第一個引數是10
第二個引數是可選的，有’start’和’end’，”start”表示一個左–持續函式，在動畫開始時，動畫的第一段將會馬上完成。以左側端點為起點，立即跳到第一個step的結尾處。它會立即跳到第一段的結束並且保持這樣的狀態直到第一步的持續時間結束。後面的每一幀都將按照此模式來完成動畫。”end”表示一個右–持續函式。動畫執行時，在每一幀裡，動畫保持當前狀態直到這一段的持續時間完成，才會跳到下一步的起點，後面的每一幀都按照這個模式來進行，在最後一幀的起點，等到這一幀的持續時間結束，整個動畫的執行也已經結束，執行動畫的元素來不及跳到這一幀的終點，直接回到了整個動畫起點，開始了第二次動畫。