Question

我在@keyframe的动画中使用垂直精灵表。

我无法让它正常工作。

＆＃13;

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; }
}

＆＃13;

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

＆＃13;

我尝试将@keyframe与background-position-y轴一起使用无济于事。它应该是1帧的动画。

Answer 1

您只需将步骤更改为6。

基本上，steps是您希望在X时间内显示的精灵数量。所以在这种情况下，你只有6而不是9。

我还将其更改为使用background-position.y ..请注意，当您遇到更复杂的网格精灵表时，使用background-position: 0 0;也是很好的做法。

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>

无法使用@keyframe将动画图像垂直移动

1 个答案: