スプライトシートを使用して画像が正しくレンダリングされない

Question

アニメーション効果を生成するためにスプライトシートを使用しようとしています。私の例は以下の通りです。画像が垂直にスクロールしています。私は画像を1つの場所に残して、垂直方向にスクロールせずにアニメーション効果を与えたいと思います。私の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>