CSS3動畫（逐幀）

Question

我的動畫壞了，我找不出如何修復它 - 這裏是它的瀏覽器：http://morxmedia.com/animation-test.html

我需要它順利通過在每個150像素X 150像素塊精靈表

下面的代碼：

<style> 
#loading { 
    background: transparent url(http://www.morxmedia.com/wp-content/themes/default/library/images/loading-animation.png) no-repeat 0px 0px; 
    background-size: 1px 9px; 
    width: 1px; 
    height: 1px; 
    -webkit-animation-name: loading; 
    -webkit-animation-duration: 1.3s; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-transform: scaleX(150) scaleY(150); 
    -webkit-transform-origin: top left; 
} 
    @-webkit-keyframes loading 
    { 
     0.000% 
     { 
      background-position: 0 -0px; 
     } 
     12.000% 
     { 
      background-position: 0 -1px; 
     } 
     24.000% 
     { 
      background-position: 0 -2px; 
     } 
     36.000% 
     { 
      background-position: 0 -3px; 
     } 
     48.000% 
     { 
      background-position: 0 -4px; 
     } 
     60.000% 
     { 
      background-position: 0 -5px; 
     } 
     72.000% 
     { 
      background-position: 0 -6px; 
     } 
     84.000% 
     { 
      background-position: 0 -7px; 
     } 
     96.000% 
     { 
      background-position: 0 -8px; 
     } 
     100.000% 
     { 
      background-position: 0 -9px; 
     } 
    } 
</style> 

<div id="loading"></div> 

Answer 1

您使用的像素和縮放訣竅讓我頭疼。這是我會怎麼處理它：

<style> 
#loading { 
    background: transparent url(http://www.morxmedia.com/wp-content/themes/default/library/images/loading-animation.png) no-repeat 0px 0px; 
    width: 150px; 
    height: 150px; 
    -webkit-animation-name: loading; 
    -webkit-animation-duration: 0.5s; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-timing-function: linear; 
} 
    @-webkit-keyframes loading 
    { 
     0.000% 
     { 
      background-position: 0 -0px; 
     } 
     10.999% 
     { 
      background-position: 0 -0px; 
     } 
     11.000% 
     { 
      background-position: 0 -150px; 
     } 
     21.999% 
     { 
      background-position: 0 -150px; 
     } 
     22.000% 
     { 
      background-position: 0 -300px; 
     } 
     32.999% 
     { 
      background-position: 0 -300px; 
     } 
     33.000% 
     { 
      background-position: 0 -450px; 
     } 
     43.999% 
     { 
      background-position: 0 -450px; 
     } 
     44.000% 
     { 
      background-position: 0 -600px; 
     } 
     54.999% 
     { 
      background-position: 0 -600px; 
     } 
     55.000% 
     { 
      background-position: 0 -750px; 
     } 
     65.999% 
     { 
      background-position: 0 -750px; 
     } 
     66.000% 
     { 
      background-position: 0 -900px; 
     } 
     76.999% 
     { 
      background-position: 0 -900px; 
     } 
     77.000% 
     { 
      background-position: 0 -1050px; 
     } 
     87.999% 
     { 
      background-position: 0 -1050px; 
     } 
     88.000% 
     { 
      background-position: 0 -1200px; 
     } 
     100.000% 
     { 
      background-position: 0 -1200px; 
     } 
    } 
</style> 

<div id="loading"></div> 

如果更改持續時間慢一點，你會看到抖動是由於您使用的動畫精靈表一些不完善的地方。