純 css sprite 循環動畫

css 3 之後做動畫就可以不用依靠 js，除了用 transition 搭配 transform 做變形動畫外，以往比較複雜用以取代 gif 的 sprite 動畫，也可以輕鬆用純 css 完成了。

首先準備類似這樣的圖片，把所有動作合在一張圖上而不是分散在各張圖。


一開始是一樣的，準備一個 div 放圖片。

view plaincopy to clipboardprint

1. <div class="cat"></div>  

在 css 設定底圖。

view plaincopy to clipboardprint

1. .cat{   
2.     width:350px;   
3.     height:380px;   
4.     margin:2% auto;   
5.     background: url(http://i.imgur.com/Bu9JKiB.png);   
6. }  

設定動畫，因為我放的這張圖片寬度是 3150 px，所以設定 3150，這個數值就根據想要做成動畫的圖片調整就好了。

view plaincopy to clipboardprint

1. @keyframes play {   
2.    100% { background-position: -3150px; }   
3. }  

再來把貓的那個 div 指定 play 這個動畫播放。

view plaincopy to clipboardprint

1. .cat{   
2.     animation: play .8s;   
3. }  

不過這時候照片會只是平移，不是我們要的效果，因為這張圖片有 9 格，所以需要在指定給他。

view plaincopy to clipboardprint

1. .cat{   
2.     animation: play .8s steps(9);   
3. }  

改了之後貓終於會動了，可是卻只動一次就停止，所以我們必須要再設定讓他循環播放。

view plaincopy to clipboardprint

1. .cat{   
2.     animation: play .8s steps(9) infinite;   
3. }  

到這邊就大功告成了。

Demo