我遇到了一个问题,我的 sprite-sheet 动画不会在最后一帧停止 - 我已经将 animation-iteration-count
更改为“1”并且还更改了 animation-fill-mode
到 'forwards',但它似乎不起作用。
动画也不会回到第一帧,它运行到最后,然后跳回到 Sprite 表最后一行的第一帧。
所以我觉得我快到了,但也许我错过了什么?
我在这里举了一个例子来演示。
.container {
width: 64px;
height: 64px;
position: relative;
}
@-webkit-keyframes spritex {
0% {
background-position-x: 0%;
background-position-y: 0%;
}
20% {
background-position-x: -500%;
background-position-y: 0%;
}
20.01% {
background-position-x: 0%;
background-position-y: -100%;
}
40% {
background-position-x: -500%;
background-position-y: -100%;
}
40.01% {
background-position-x: 0%;
background-position-y: -200%;
}
60% {
background-position-x: -500%;
background-position-y: -200%;
}
60.01% {
background-position-x: 0%;
background-position-y: -300%;
}
80% {
background-position-x: -500%;
background-position-y: -300%;
}
80.01% {
background-position-x: 0%;
background-position-y: -400%;
}
99.99% {
background-position-x: -500%;
background-position-y: -400%;
}
100% {
background-position-x: -500%;
background-position-y: -400%;
}
}
.sprite {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(http://i296.photobucket.com/albums/mm182/CodeH4x0r/explosion17.png);
background-size: 500% 500%;
-webkit-animation: spritex 3s steps(5) 1;
-webkit-animation-fill-mode: forwards;
animation: spritex 3s steps(5) 1;
animation-fill-mode: forwards;
}
}
<div class="container">
<div class="sprite"></div>
</div>
最佳答案
您的位置不正确。 正确的位置不应高于 100%。
这是正确的
.container {
width: 64px;
height: 64px;
position: relative;
}
@-webkit-keyframes spritex {
0% {
background-position-x: 0%;
background-position-y: 0%;
}
20% {
background-position-x: 100%;
background-position-y: 0%;
}
20.01% {
background-position-x: 0%;
background-position-y: 25%;
}
40% {
background-position-x: 100%;
background-position-y: 25%;
}
40.01% {
background-position-x: 0%;
background-position-y: 50%;
}
60% {
background-position-x: 100%;
background-position-y: 50%;
}
60.01% {
background-position-x: 0%;
background-position-y: 75%;
}
80% {
background-position-x: 100%;
background-position-y: 75%;
}
80.01% {
background-position-x: 0%;
background-position-y: 100%;
}
100% {
background-position-x: 100%;
background-position-y: 100%;
}
}
.sprite {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(http://i296.photobucket.com/albums/mm182/CodeH4x0r/explosion17.png);
background-size: 500% 500%;
-webkit-animation: spritex 3s steps(4) 1;
-webkit-animation-fill-mode: forwards;
animation: spritex 3s steps(4) 1;
animation-fill-mode: forwards;
}
}
<div class="container">
<div class="sprite"></div>
</div>
关于CSS3 动画不会停在最后一帧,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31054694/