CSS Sprite 表动画不起作用（左右滚动）

Question

我使用 CSS 动画来为角色设置动画。我已经成功完成了一个动画，但是当我尝试其他动画时，我得到了奇怪的影响，比如滚动侧向或向上滚动。我正在使用 Texture Packer 创建精灵表。

通过我的研究，我尝试了不同的方法：

• 将精灵保持在一行。我尝试了各种精灵表， 有些只有一行，有些则包含多个精灵动作 即 4 x8。
• 一张精灵表上的多个角色移动（空闲、奔跑、行走、
  等等。）。
• 只保留一个角色移动精灵表（仅空闲）。

这些只是我尝试过的一些事情，但没有成功。 我不确定我是否根本不了解精灵表在 CSS 中是如何工作的，或者我是否犯了一个简单的错误。有人对如何让我的动画工作有任何想法吗？

这是我的代码：

HTML：

<span class="jellyYellow0001 sprite"></span>

CSS：

@keyframes play {
    100% { background-position: -127px; } /*I've played with this value*/
}


.sprite {

    display:inline-block;
    overflow:hidden;
    background-repeat: no-repeat;
    background-image:url(jellyYellow.png);
    width: 130px;
    height: 110px;
    animation: play 1s steps(8) infinite;

}

.jellyYellow0001 {width:124px; height:108px; background-position: -1px -1px}
.jellyYellow0002 {width:124px; height:108px; background-position: -127px -1px}
.jellyYellow0003 {width:124px; height:108px; background-position: -253px -1px}
.jellyYellow0004 {width:124px; height:108px; background-position: -379px -1px}
.jellyYellow0005 {width:124px; height:108px; background-position: -505px -1px}
.jellyYellow0006 {width:124px; height:108px; background-position: -631px -1px}
.jellyYellow0007 {width:124px; height:108px; background-position: -757px -1px}
.jellyYellow0008 {width:124px; height:108px; background-position: -883px -1px}
.jellyYellow0009 {width:124px; height:108px; background-position: -1009px -1px}
.jellyYellow0010 {width:124px; height:108px; background-position: -1135px -1px}

这是精灵表的一个版本。

这是我尝试过的另一个精灵表。

Answer 1

@keyframes play {
    100% { background-position: -127px; } /*I've played with this value*/
}


.sprite {
	display:inline-block;
    overflow:hidden;
    background-repeat: no-repeat;
    background-image:url(https://i.stack.imgur.com/y0Xxv.png);
    width: 130px;
    height: 110px;
    animation: play 1s steps(8) infinite;
	animation-iteration-count: 1;

}

.jellyYellow0001 {width:124px; height:108px; background-position: -1px -1px}

<span class="jellyYellow0001 sprite"></span>

在精灵选择器U中需要添加animation-iteration-count: 1;