html - 如何使动画 Sprite (带有行和列)在 Firefox 中工作？

Question

示例(您可以修改和测试):http://codepen.io/g-liu/pen/XbrMzr?editors=110

我修改了代码以在 Firefox 中工作，但第二个动画似乎在跳帧。

帧数: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 以一种适用于所有浏览器(甚至移动设备)的通用方式制作。