Javascript CSS精灵表动画的帮助

我有一张sprite表，宽5760像素，高5400像素，包含10行6列，每行960像素，宽540像素。精灵表中的所有精灵都是从左到右和从上到下排列的。我想用CSS把这60幅图像作为动画播放，但我很难理解需要什么代码。有人有什么建议吗？

解决这个问题的最简单方法是按顺序使用css类来辅助背景位置的更改

即

然后在javascript中（使用jQuery）

---

最简单的解决方案是用css类按顺序辅助背景位置的更改

即

然后在javascript中（使用jQuery）

---

您只需操纵

背景位置

。你用谷歌搜索过什么吗？我用谷歌搜索了一个多星期，试图看看其他人是如何用CSS从sprite表单创建动画的，但由于某种原因，我无法让它与我的png文件一起工作。我也找不到任何人使用CSS动画使用网格精灵表。大多数人将精灵工作表用作单行或列，而不是网格。我在这里实现了类似的事情：是否有可能将该动画的CSS文件发布到某个位置？您所要做的就是操纵

背景位置。你用谷歌搜索过什么吗？我用谷歌搜索了一个多星期，试图看看其他人是如何用CSS从sprite表单创建动画的，但由于某种原因，我无法让它与我的png文件一起工作。我也找不到任何人使用CSS动画使用网格精灵表。大多数人将精灵工作表用作单行或列，而不是网格。我在这里实现了类似的事情：是否有可能将该动画的CSS文件发布在某个地方？
.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 

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();