CSS3 sprite 动画如何在最后一帧停止答案

【问题标题】：how CSS3 sprite animation will stops at last frameCSS3 sprite 动画如何在最后一帧停止
【发布时间】：2017-03-08 19:36:04
【问题描述】：

我正在播放包含 23 帧的精灵图像的 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; }
}

【问题讨论】：

标签： image css animation sprite

【解决方案1】：

我想你可能想这样运行：

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

但实际上你是这样做的：

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

也许您可以尝试将其移至background-position: -11990px

【讨论】：