animation-fill-mode:forwards is the correct property to use. It may not appear to work initially because of the default background-repeat:repeat setting on the sprite image background. This causes the last frame to actually display as the first frame of the repeated background image.
If you modify the code to:
background: url("http://files.simurai.com/misc/sprite.png") no-repeat;
animation: play .8s steps(10) forwards;
@keyframes play {
from { background-position: 0px; }
to { background-position: -500px; }
}
and run the demo, you will notice that the final frame is now blank, demonstrating that forwards is functioning correctly. Additionally, adjusting the final to and steps properties to position the background at -450px with 9 steps will ensure the animation stops at the correct point.
-webkit-animation: play .8s steps(9) forwards;
@keyframes play {
from { background-position: 0; }
to { background-position: -450px; }
}
View demo - The Chrome properties have been updated. Here is the sample image in case the original link is no longer available:
https://i.sstatic.net/ilKfd.png
.hi {
width: 50px;
height: 72px;
background: url("https://i.sstatic.net/ilKfd.png") no-repeat;
-webkit-animation: play .8s steps(9) forwards;
-moz-animation: play .8s steps(10) infinite;
-ms-animation: play .8s steps(10) infinite;
-o-animation: play .8s steps(10) infinite;
animation: play .8s steps(9) forwards;
}
@-webkit-keyframes play {
from { background-position: 0px; }
to { background-position: -450px; }
}
@-moz-keyframes play {
from { background-position: 0px; }
to { background-position: -500px; }
}
@-ms-keyframes play {
from { background-position: 0px; }
to { background-position: -500px; }
}
@-o-keyframes play {
from { background-position: 0px; }
to { background-position: -500px; }
}
@keyframes play {
from { background-position: 0px; }
to { background-position: -450px; }
}
<div class="hi"></div>