모든 스프라이트 이미지에 애니메이션을 적용하는 방법은 무엇입니까?

Question

선택한 이미지 스프라이트에 하나의 라인 이미지가 없을 때 모든 이미지 스프라이트에 애니메이션을 적용하는 방법은 무엇입니까?

은 **이 하나의 예는 여기에 한 줄의 이미지가 **

링크 :

.hi { 
 
    width: 50px; 
 
    height: 72px; 
 
    background-image: url("http://s.cdpn.io/79/sprite-steps.png"); 
 
    
 
    -webkit-animation: play .8s steps(10) infinite; 
 
     -moz-animation: play .8s steps(10) infinite; 
 
     -ms-animation: play .8s steps(10) infinite; 
 
     -o-animation: play .8s steps(10) infinite; 
 
      animation: play .8s steps(10) infinite; 
 
} 
 

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

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

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

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

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

<img src="http://s.cdpn.io/79/sprite-steps.png" /> 
 
<div class="hi"></div>

Reference 지금이 예는 한 줄없는 스프라이트 이미지가 포함되어 있습니다. 그러나 3 행의 스프라이트 이미지가 포함되어 있습니다. 위의 코드 스 니펫과 같은 링크를 어떻게 움직이게합니까? jquery/javascript를 사용하여 표시합니까? 도와주세요.

img {display: block;margin: auto;} 
 

 
.sample { 
 
    margin: 0 auto; 
 
    width: 75px; 
 
    height: 100px; 
 
    background-image: url("https://fermmm.files.wordpress.com/2011/02/preview.jpg"); 
 
      animation: play 1s steps(4) infinite; 
 
} 
 
@keyframes play { 
 
    from { background-position: 0px; } 
 
    to { background-position: -299px; } 
 
}

<img src="https://fermmm.files.wordpress.com/2011/02/preview.jpg" /> 
 

 
<div style="text-align:center;">Sprite image</div> 
 
<div class="sample"></div>

Answer 1

개의 별도 키 프레임 애니메이션 수평 4 프레임 및 3 개 프레임을 수직으로 통과하도록 생성된다. 한 방향의 애니메이션이 재생 중일 때는 다른 애니메이션이 고정되어야합니다.

1 초가 4 수평 프레임을 통과하도록 설정 되었기 때문에 다음 수직 프레임이 1 초 후에 시작하므로 수직 방향의 지속 시간은 1s x 3 수직 프레임과 동일합니다.

img { 
 
    display: block; 
 
    margin: auto; 
 
} 
 

 
.sample { 
 
    margin: 0 auto; 
 
    width: 75px; 
 
    height: 100px; 
 
    background-image: url("https://fermmm.files.wordpress.com/2011/02/preview.jpg"); 
 
    animation: playh 1s steps(4) infinite, playv 3s steps(3) infinite; 
 
} 
 

 
@keyframes playv { 
 
    0% { background-position-y: 0px; } 
 
    100% { background-position-y: -301px; } 
 
} 
 

 
@keyframes playh { 
 
    0% { background-position-x: 0px; } 
 
    100% { background-position-x: -299px; } 
 
}

<img src="https://fermmm.files.wordpress.com/2011/02/preview.jpg" /> 
 

 
<div style="text-align:center;">Sprite image</div> 
 
<div class="sample"></div>