CSS 스프라이트 시트 애니메이션이 작동하지 않습니다 (좌우로 스크롤)

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} 

여기 스프라이트 시트의 한 버전입니다.

여기 제가 시도한 또 다른 스프라이트 시트입니다. U는 애니메이션 반복 카운트 추가 할 필요가 스프라이트의 선택에

Answer 1

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

 

 
.sprite { 
 
\t 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; 
 
\t animation-iteration-count: 1; 
 

 
} 
 

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

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

: 1;