具有多行精灵表的CSS精灵表动画

Question

我正在尝试使用css使用以下步骤播放精灵动画： http://jsfiddle.net/simurai/CGmCe/

在这个链接中，他基本上定义了这样的帧：

@-webkit-keyframes play { from { background-position: 0px; } to { background-position: -500px; } }

我遇到的问题是;我的精灵表是1309 x 910，有30帧。每帧为187 x 182.因此，我的精灵表在前4行中有7帧，在最后一行中有2帧。

我可以自己定义相框，就像上面链接上的动画一样吗？或者我是否需要更改spritesheet并使其成为1行30帧（结果为5610 x 182精灵表）

Answer 1

你需要1排。 Your示例使用steps函数。它使用从开始到结束的间隔数。因此，如果精灵中有多行，则高度（行）不会影响一步（间隔）的宽度。