我正在播放包含 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; }
}
最佳答案
我想你可能想这样跑:
| | => | | what you see
----------- ----------- background
但事实上你确实是这样的:
| | => | | what you see
----------- ----------- background
也许你可以尝试将它移动到 background-position: -11990px
关于image - CSS3 Sprite 动画如何在最后一帧停止,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42669983/