如何在css中創建響應的精靈圖表動畫？

Question

我一直在試圖做這個小時，但到目前爲止我還沒有取得任何進展。

我有一個網站有一些動畫，有些會在點擊時被激活，有些在懸停。類似於本網站中發現的動畫：http://www.pixelwrapped.com/貓的尾巴反應良好，因爲在您調整連衣裙時，它也隨着它縮放。

這是我使用來創建動畫

.monster { 
      position: absolute; 
      width: 100px; 
      height: 100px; 
      margin: 2% auto; 
      background: url('img/le-cloud.png') left center; 
      overflow: auto; 
      display: block; 
      left: 20%; 
      top: 40%; 

     } 
     .monster:hover { 
      position: absolute; 
      width: 100px; 
      height: 100px; 
      margin: 2% auto; 
      background: url('img/le-cloud.png') left center; 
      animation: play .9s steps(18); 
      overflow: auto; 
      display: block; 
      left: 20%; 
      top: 40%; 

     } 

我發現this教程其使用比例，即用於改變1幀在本例中沒有播放整個18幀作品的代碼，我有其他由超過30個精靈組成的動畫，我看着spritely.js，但它沒有響應。

任何想法如何解決這個問題？

Answer 1

我想通了最終怎麼做！萬一還有人關心，讓我做一些地名釋義只是讓你不用去通過什麼我去throught：

<style> 
     div.sprite { 
      margin: 0 auto; 
      width: 40%; 
/*   Change this to what ever value you desire*/ 
      height: 0; 
      padding-bottom: 40%; 
      background-image: url("le-cloud-copy.png"); 
/*   Add the sprite sheet here, must be on a staright line*/ 
      background-position: 0 0; 
      background-size: 1800%; 
/*   I have 18 sprites in the sheet thus it's 1800%, if it was 4 you'd use 400% and so on*/ 
      display: block; 
     } 
     div.sprite:hover { 
/*   background-position: 500% 0;*/ 
      animation: play .9s steps(18); 
/*   18 steps to go over al the sprites i have, if you had 4 in the sprite the value would be 4 for example */ 
     } 
     @keyframes play { 
      100% { 
       background-position: 1800% 0; 
      } 
     } 
    </style> 

和魔術位here包括這個庫，這應該工作。

<script src="js/prefixfree.min.js"></script>