CSS3アニメーション（フレームごと）

Question

私のアニメーションが壊れていると私はここにIT-を修正する方法を見つけ出すことはできませんが、それはブラウザである：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> 

。