CSS3を使用してスプライトグリッドをアニメーション化しますか？

Question

私は実行してアニメーション化する必要があるこのサンプルのスプライトグリッドシートを持っています。私は一定のポイントに達することができますが、それを完璧にするのに苦労しています。アニメーションがスムーズではなく、さらに画像が適切に整列していない。アニメーション中に、ビュー内の他の要素の中央にないイメージ要素を見ることができます。これまでのところ私のHTMLとCSS3コードです。

.hi { 
    width: 910px; 
    height: 340px; 
    background-image: url("https://simba-heroku.imgix.net/animation-homepage-tablet-retina.jpg?auto=format,compress"); 
    position: relative; 
    -webkit-animation: playv 12s steps(6) infinite, playh 2s steps(4) infinite; 

} 

@-webkit-keyframes playv { 
    0% { background-position-y: 0px; } 
    100% { background-position-y: 100%; } 
} 

@-webkit-keyframes playh { 
    0% { background-position-x: 0px; } 
    100% { background-position-x: 100%; } 
} 

---

<div class="hi"> 
</div> 

---

フィドル：http://jsfiddle.net/bf5ckdv9/

Answer 1

私は、バックグラウンドの寸法スタイルを追加して、その結果が、ほぼ大丈夫ですあなたの特性のいくつか

を再配置しています。しかし、あなたのスプライトグリッドが順番マイルの意見では

.hi { 
 
    width: 910px; 
 
    height: 340px; 
 
    background-image: url("https://simba-heroku.imgix.net/animation-homepage-tablet-retina.jpg?auto=format,compress"); 
 
    position: relative; 
 
    animation: playh 2s steps(5) infinite, playv 10s steps(5) infinite; 
 
    border: solid 1px blue; 
 
    background-size: 500% 500%; 
 
    background-repeat: no-repeat; 
 
} 
 

 
@keyframes playv { 
 
    0% { background-position-y: 0px; } 
 
    100% { background-position-y: 125%; } 
 
} 
 

 
@keyframes playh { 
 
    0% { background-position-x: 0%; } 
 
    100% { background-position-x: 125%; } 
 
}

<div class="hi"> 
 
</div>