具有多行 Sprite-sheet 的 CSS Sprite-sheet 动画答案

【问题标题】：CSS Sprite-sheet animation with Multiple Row Sprite-sheet具有多行 Sprite-sheet 的 CSS Sprite-sheet 动画
【发布时间】：2014-02-02 12:14:03
【问题描述】：

我正在尝试使用以下步骤使用 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 sprite sheet）

【问题讨论】：

怎么样：你用你的精灵设置一个小提琴并尝试？
@caramba 我自己尝试了多种方式，但无论我做什么，它只会播放第一行而忽略其他行。
如果您设置一个小提琴并展示您尝试过的内容，会更容易提供帮助。您可以在 background-position:HERE 上设置更多值；它是背景位置：xpos ypos；（x=水平，y=垂直）。所以也许可以尝试类似背景位置：-20px -50px;看看会发生什么
@caramba jsfiddle.net/erkinyldz/D5r7d/1 这是 jsfiddle 链接。我测试了不同的东西，它们都不起作用。将其留在工作位置 1 行。让我知道你是否可以做多行。顺便说一下，我用jquery添加了动画，但是如果这个系统可以做到我会切换到css。
CSS animations with Spritesheets in a grid image (not in a row)的可能重复

标签： css animation sprite-sheet

【解决方案1】：

您需要 1 行。 Your 示例使用 steps 函数。它使用从开始到结束的间隔数。因此，如果您的精灵中有几行，height(rows) 不会影响一步（间隔）的宽度。

【讨论】：

不要因为这个答案而灰心。这是可能的，同时使用两个steps()'d @keyframes：一个用于循环列，另一个用于行。 stackoverflow.com/a/22575868/1489243 已经做到了，并且很好地解释了它。而且该技术有时很有用，因为 Firefox 奇怪地无法支持任一维度上超过 32766 像素的图像：support.mozilla.org/en-US/questions/973667。