I am currently facing an issue with my sprite-sheet animation that is not stopping on the final frame. I have tried changing the animation-iteration-count to '1' and the animation-fill-mode to 'forwards', but unfortunately, it does not seem to be working.
The animation does not reset back to the first frame either; instead, it reaches the end and then abruptly jumps back to the initial frame in the last row of the sprite sheet.
It feels like I am close to resolving the issue, but I must be overlooking something?
To illustrate, I have created a demonstration example below:
.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>