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

 library(shiny)
    shinyServer(function(input, output) {

    output$table <- renderDataTable(df1) })

@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}

精灵选择器U中的

需要添加animation-iteration-count：1;