純 css sprite 循環動畫



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

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


一開始是一樣的,準備一個 div 放圖片。
  1. <div class="cat"></div>  

在 css 設定底圖。
  1. .cat{   
  2.     width:350px;   
  3.     height:380px;   
  4.     margin:2% auto;   
  5.     backgroundurl(http://i.imgur.com/Bu9JKiB.png);   
  6. }  


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

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


再來把貓的那個 div 指定 play 這個動畫播放。
  1. .cat{   
  2.     animation: play .8s;   
  3. }  

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

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


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

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

到這邊就大功告成了。

Demo



留言

熱門文章