最後のフレームでCSS3スプライトアニメーションが停止する方法

Question

23フレームを含むスプライト画像でCSS3アニメーションを再生しています。私はそれが1ラウンドだけを再生し、最後のフレームでそれを停止します。しかし、残念ながらそれは完全な1つの競争ラウンド後に隠れている。 誰も助けてくれますか？

.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

に移動しようとすることができ