如何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