CSS3 Keyframe Animations: Not Ending and staying on the last frame

Question

I am trying to create keyframe animation here and want to end the animation with last frame. but it is not.

Code:

#circleAnime {
    width: 710px;
    height: 710px;
    margin: 2% auto;
    background: url('../images/sprite.png') left center no-repeat;
    -webkit-animation: play 4s steps(18) forwards; /* Number of frames we have */
    animation: play 4s steps(18) forwards;
}

@keyframes play {
    from {
        background-position: 0; 
    }
    to {
        background-position: -12780px;  /* Sprite Width */
    }
}

@-webkit-keyframes play {
    from {
        background-position: 0;
    }
    to {
        background-position: -12780px;  
    }
}

I have followed this link and changed background repeat to no-repeat but that did not help.

Demo:

http://thejobupdates.com/pt/circleanime/

Can anyone help me letting me know how I can stop it at last frame?

Answer 1

The Problem

You are stopping the animation after the last frame, instead of at it.

You have a sprite image with the length of 25560px, so background-position: -25560px is right after the last frame.

The Solution

Each frame width is 710px. We want to stop at the background position of the last frame - 25560px - 710px = 24850px, ie - background-position: -24850px

When you do so, you have to remove one stop from the animation 35 instead of 36.

---

The CSS

animation: play 4s steps(35) forwards;

@keyframes play {
    0% {
        background-position: 0;
    }
    100% {
        background-position: -24850px;
    }
}

---

Demo:

#circleAnime {
    width: 710px;
    height: 710px;
    margin: 2% auto;
    background: url(http://thejobupdates.com/pt/circleanime/images/sprite.png) left center;
    animation: play 4s steps(35) forwards;
}

@keyframes play {
    0% {
        background-position: 0;
    }
    100% {
        background-position: -24850px;
    }
}

<div id="circleAnime"></div>