image - CSS3 Sprite 动画如何在最后一帧停止

Question

我正在播放包含 23 帧的 Sprite 图像的 css3 动画。我希望它只播放一轮并在最后一帧停止。但不幸的是，它在完成一轮比赛后就隐藏起来了。谁能帮帮我？

.animation-door{
    background-image: url(../images/sprite-animation-1.png);
    width: 545px;
    height:660px;
    background-size:12535px auto;
    background-repeat:no-repeat;
    animation: doorOpen 7.5s steps(23) forwards 1;
    -webkit-animation: doorOpen 7.5s steps(23) forwards 1;
}


@-webkit-keyframes doorOpen {
    from { background-position:  0px; }
    to { background-position: -12535px; }
}
@keyframes doorOpen {
    from { background-position: 0px; }
    to { background-position: -12535px; }
}

Answer 1

我想你可能想这样跑:

| |             =>           | |     what you see
-----------          -----------     background

但事实上你确实是这样的:

| |             =>              | |     what you see
-----------          -----------        background

也许你可以尝试将它移动到 background-position: -11990px​​