如何CSS3精灵动画将在最后一帧停止

Question

我正在播放包含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; } 
} 

Answer 1

我想你可能要像这样运行：

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

但事实上，你确实是这样的：

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

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