이미지가 스프라이트 시트를 사용하여 올바르게 렌더링되지 않습니다.

Question

애니메이션 효과를 생성하기 위해 스프라이트 시트를 사용하려고합니다. 내 예가 아래와 같습니다. 이미지가 수직으로 스크롤됩니다. 이미지를 한 곳에서 유지하고 수직으로 스크롤하는 대신 애니메이션 효과를 제공하고 싶습니다. 내 CSS에없는 것은 무엇입니까? 코드 아래

@total-duration: 4s; 
@steps-per-row: 15; 
@duration-per-item: @total-duration/@steps-per-row; 

body {background: #000;} 

#interactive-animation { 
    margin: 0 auto; 
    width: 128px; 
    height: 128px; 
    background: url('https://amazed.png') center center; 
    -webkit-animation: 
    play-vertical @total-duration steps(@steps-per-row) infinite, 
    play-horizontal @duration-per-item steps(@steps-per-row) infinite; 
    animation: 
    play-vertical @total-duration steps(@steps-per-row) infinite, 
    play-horizontal @duration-per-item steps(@steps-per-row) infinite; 

    -webkit-animation-play-state: running; 
    animation-play-state: running; 
} 

#interactive-animation:hover { 
    -webkit-animation-play-state: paused; 
    animation-play-state: paused; 
} 

@-webkit-keyframes play-vertical { 
    0% { background-position-y: 0; } 
100% { background-position-y: 100%; } 
    //100% { background-position-y: -29px; } 
} 

@-webkit-keyframes play-horizontal { 
    0% { background-position-x: 0; } 
    100% { background-position-x: 100%; } 
    //100% { background-position-x: -1814px; } 
} 

Answer 1

보십시오, 우리는 CSS steps() animation functions을 포함 할 필요가 sprite animation을 수행 할 수는 steps()는 단계에 연속 애니메이션이나 전환을 파괴하는 데 사용됩니다.

body{ 
 
    background:black; 
 
} 
 
#interactive-animation { 
 
    margin: 120px auto; 
 
    width: 120px; 
 
    height: 120px; 
 
    background: url('https://samsungvr.com/ui/CMS/wow.png'); 
 
    -webkit-animation: mv 2s steps(2) infinite; 
 
    overflow:hidden; 
 
} 
 
@-webkit-keyframes mv{ 
 
0% { background-position-y: 0; } 
 
100% { background-position-y: 100%; } 
 
}

<div id="interactive-animation"></div>

이 일