I'm attempting to implement a character jumping animation that should stop on the last frame, but it's not working as expected. I have tried using
animation-fill-mode: forwards;
but it didn't produce the desired outcome.
Below is the code snippet I am currently using:
.kia-jump {
width: 320px;
height: 464px;
position: absolute;
top: 1%;
left: 41%;
background: url('../images/activity/KiaJumpingAnimation.png') left center;
animation-fill-mode: forwards;
animation: jumpAnim 1.67s steps(24) 1;
}
@keyframes jumpAnim {
100% { background-position: -7920px; }
}
If you would like to view the code in action, here is the JSFiddle link -> https://jsfiddle.net/k4rz5tdy/