使用css动画spriteesheet

Question

我无法使用css为spritesheet制作动画 我看到的每个例子都包含一个只有1行精灵或1列的精灵表 像这样：

并使用keyframes

对其进行动画处理

@keyframes play {
100% { background-position: -1900px; }
}

但对我来说，spritesheet是一个10x8

的网格

他们无论如何使用css为这个特定的spritesheet实现动画？或者我应该使用HTML5画布？

每帧为90x96像素

这是我的形象

Answer 1

处理网格精灵上的动画的方法是使用2个动画。 一个用于水平，一个用于垂直

Live Demo

.hi {
    width: 90px;
    height: 96px;
    background-image: url("http://i.stack.imgur.com/G7o8R.jpg");
    -webkit-animation: playv 6s steps(7) infinite, playh 1s steps(9) 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%; }
}

我的回答是基于这个答案： CSS animations with Spritesheets in a grid image (not in a row)

Answer 2

我建议的最简单，最KISS（保持它非常简单）的方法是从纹理打包器生成图像，并将每行复制并粘贴到一个长行中，这样你就有了1条长行。将其另存为新文件。更类似于开头时的1行/ 1列示例。

如果可能的话，我还建议在每个fuzzball（我能想到的最佳描述）之间添加更多的填充/空格。否则，在边缘上没有出血的情况下瞄准每个帧可能是困难的。如第9行，第9列，fuzzball手臂几乎接触。