How can I make animation sprites (with rows and cols) work in firefox?

Question

Example (you can modify and test): http://codepen.io/g-liu/pen/XbrMzr?editors=110

I've modified the code to work in Firefox, but the second animation seems to be skipping frames.

frames: http://www.fabiobiondi.com/blog/wp-content/uploads/2012/08/runningGrant.png

html:

<div id="guy-1" class="guy"></div>

<div id="guy-2" class="guy"></div>

<a href="http://www.fabiobiondi.com/blog/wp-content/uploads/2012/08/runningGrant.png" target="_BLANK">Original sprite</a>

css:

.guy {
  height: 294px;
  width: 165px;
  display: inline-block;
  background-image: url(http://www.fabiobiondi.com/blog/wp-content/uploads/2012/08/runningGrant.png);
}

#guy-1 {
  animation: run-x 0.4s infinite steps(12);
}

#guy-2 {
  animation: run-x 0.4s infinite steps(12), run-y 2.4s infinite steps(6);
}

@keyframes run-x {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -1980px 0;
  }
}

@keyframes run-y {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 -1764px;
  }
}

Answer 1

我使用LESS（http://lesscss.org/）

解决了我的问题

它以通用的方式制作动画的CSS，适用于所有浏览器（甚至在移动设备中）。