Question

我尝试过“-webkit-animation-fill-mode：forwards;”但我似乎无法使它工作，只是在第一帧暂停，有人可以帮助我吗？

JS FIDDLE

<div class="logo"></div>

.logo {
    width: 328px;
    height: 187px;
    background-image: url("http://u.cubeupload.com/amitkilo/opti.png");
    -webkit-animation: play 2.0s steps(60);
       -moz-animation: play 2.0s steps(60);
        -ms-animation: play 2.0s steps(60);
         -o-animation: play 2.0s steps(60);
            animation: play 2.0s steps(60);
}

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

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

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

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

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

Answer 1

我认为你的数字略有偏差。如果你逐步减少步数和最终的bg位置......一切正常。

我认为this问题可能有关。

＆＃13;

.logo {
    width: 328px;
    height: 187px;
    background-image: url("http://u.cubeupload.com/amitkilo/opti.png");
    background-repeat: no-repeat;
    animation: play 2.0s steps(59);
    -webkit-animation-fill-mode: forwards;
}
@keyframes play {
    0% {
        background-position: 0px 0px;
    }
    100% {
        background-position: 0px -11033px;
    }
}

＆＃13;

<div class="logo"></div>

＆＃13;

如何暂停最后一帧的CSS动画？

1 个答案: