アニメーションイメージを垂直方向に正しく移動できません。

Question

@keyframeのアニメーションで垂直スプライトシートを使用しています。

正しく動作させることができません。

body{ 
 
    background: brown; 
 
} 
 
.hi { 
 
    width: 117px; 
 
    height: 180px; 
 

 
    background-image: url("http://i.imgur.com/DxApxaV.png"); 
 
    
 
    -webkit-animation: play .9s steps(8) infinite; 
 
     -moz-animation: play .9s steps(8) infinite; 
 
     -ms-animation: play .9s steps(8) infinite; 
 
     -o-animation: play .9s steps(8) infinite; 
 
      animation: play .9s steps(8) infinite; 
 
} 
 
@keyframes play { 
 
    from { background-position:0px; } 
 
    to { background-position:0px 1080px; } 
 
}

<div class="hi"></div>

私は無駄にbackground-position-y軸と@keyframeを使用してみました。 1フレームでアニメーションする必要があります。あなただけの基本的話す6.

に手順を変更する必要が

Answer 1

、stepsあなたがXの時間をかけて表示するように欠けているスプライトの数です。したがって、この場合には、あなただけの6、ない9

を持って、私はまたbackground-position: 0 0;を持つことも、あなたは複雑なより出くわす、グリッドスプライトシートのために良い習慣であることに注意してください。.. background-position.yを使用するように変更しました。

body{ 
 
    background: brown; 
 
} 
 
.hi { 
 
    width: 117px; 
 
    height: 180px; 
 

 
    background-image: url("http://i.imgur.com/DxApxaV.png"); 
 
    background-position: 0 0;   
 

 
    -webkit-animation: play .9s steps(6) infinite; 
 
     -moz-animation: play .9s steps(6) infinite; 
 
     -ms-animation: play .9s steps(6) infinite; 
 
     -o-animation: play .9s steps(6) infinite; 
 
      animation: play .9s steps(6) infinite; 
 
} 
 
@keyframes play { 
 
    from { background-position-y:0px; } 
 
    to { background-position-y:1080px; } 
 
}

<div class="hi"></div>