CSS3 animation won't stop on the last frame - css

Question

I've got an issue where my sprite-sheet animation won't stop on the final frame - I've changed the animation-iteration-count to '1' and also changed the animation-fill-mode to 'forwards', but it doesn't appear to be working.
The animation doesn't revert back to the first frame either, it runs to the end, and then jumps back to the first frame in the last row of the sprite sheet.
So I feel like I'm almost there, but maybe I'm missing something?
I've put together an example here to demonstrate.
.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>
(View in Codepen)

Answer 1

Your positions are not correct.
The correct positions shouldn't get higher than 100%.
This are the correct ones
.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>

Answer 2

There are actually two problems here. First, you have an off-by-one error with the step function. The starting position shouldn't be included in number of steps passed to the step function.
From MDN:
steps(4, end)
The second problem is that you seem to have an incorrect idea of what percentage values in background-position represent. Again, from MDN:
The background-position CSS property sets the initial position,
relative to the background position layer defined by background-origin
for each defined background image.
[...]
Percentages refer to the size of the background positioning area minus
size of background image; size refers to the width for horizontal
offsets and to the height for vertical offsets
In this case, the "size of the background positioning area" is the size of the entire sprite sheet, and the "size of background image" is the size of one image in that sheet. So what that means in this case is that 100% is equal to the width of exactly 4 spaces in the sprite sheet (5 - 1), and therefore 25% is equal to the width of exactly one space in the sprite sheet.
This means that background-position-x: -500%; background-position-y: -400%; isn't where you think it is. That's why the sprite being displayed at the end of the animation is wrong.
So putting all this knowledge together, we end up with this:
.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%;
}
99.99% {
background-position-x: 100%;
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>
(View in Codepen)