CSSスプライトシートのアニメーションのサポート

Question

私はスプライトシートが5760ピクセル幅×5400ピクセルの高さで、10行と6列のそれぞれが960ピクセル幅×540ピクセルの高さです。スプライトシート内のすべてのスプライトは、左から右、上から下に配置されています。おそらくCSSを使用してアニメーションとして60枚の画像を再生したいと思っていましたが、必要なコードが分かりません。誰にも何か提案はありますか？

Answer 1

これに対する最も簡単な解決策は、バックグラウンド位置の変更をCSSクラスで順番に割り当てることです。

ie。

.class1{background-position:0,0} // top left 
.class2{background-position:-960px, 0} // indent by 960 
// go to .class6 minus 960 to first px value 
.class7{background-position:0,540px} // got to left of 2nd row 
.class8{background-position:-960px,-540px} // got to left of 2nd row 
// keep going for 10 rows, minus 540 per row and 960 per col 

その後、JavaScriptで（jQueryを使って）

var viewarea = documentGetElementByID('my_window'); // id of DIV 
var counter = 0; 
var speed = 300; // miliseconds between frame change 

function loopAnimation(){ 
    // remove old frame 
    if($(viewarea).hasClass("class"+counter){ 
    $(viewarea).removeClass("class"+counter); 
    { 
    // change counter 
    if(counter == 60){ 
    counter = ; 
    }else { 
    counter++; 
    } 
    // move to next frame 
    $(viewarea).addClass("class"+counter); 
    // set animation to do another frame 
    var t = setTimeout(function(){loopAnimation();}, speed); 
} 
// begin animation 
loopAnimation();