Stopping a Css3 Animation on Last Frame

Maintaining the final state at end of a CSS3 animation

Try adding animation-fill-mode: forwards;. For example like this:

-webkit-animation: bubble 1.0s forwards; /* for less modern browsers */
        animation: bubble 1.0s forwards;

CSS3 animation won't stop on the last frame

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>

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

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>

CSS3 Keyframe Animations: End and stay on the last frame

animation-fill-mode:forwards is the correct property to use. Is does not seem to work because the sprite image background has a default background-repeat:repeat, so the last frame you think you are seeing is actually the first frame of the repeated background image.

If you set

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 the final frame is now blank - so forwards is doing what it should do. The second part of the solution is to change the final to and steps CSS properties to position the background correctly. So we really need the background to stop at -450px and use 9 steps.

-webkit-animation: play .8s steps(9) forwards;

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

See demo - I only fixed the Chrome properties. Also here is the sample image in case the original disappears.

Waving sprite

.hi {    width: 50px;    height: 72px;    background: url("http://i.stack.imgur.com/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>

How to stop animation at the last frame

Though you had set the animation-fill-mode to forwards (the -webkit prefix should not be a problem as you were trying on Chrome), the animation did not stop at the 3rd box because your to setting (last keyframe) was taking it back to its original state (which shows box 1). To fix this, you can make the last keyframe also hold the same position as at 33% (which is show box 3).

 #spinner div {   position: absolute;   width: 120px;   height: 120px;   border: 1px solid #ccc;   background: rgba(255, 255, 255, 0.8);   box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2);   text-align: center;   line-height: 120px;   font-size: 100px; } #spinner .face1 {   -webkit-transform: translateZ(60px); } #spinner .face2 {   -webkit-transform: rotateY(90deg) translateZ(60px); } #spinner .face3 {   -webkit-transform: rotateY(90deg) rotateX(90deg) translateZ(60px); } @-webkit-keyframes spincube {   from {}    16% {     -webkit-transform: rotateY(-90deg);   }   33% {     -webkit-transform: rotateY(-90deg) rotateZ(90deg);   }   to {     -webkit-transform: rotateY(-90deg) rotateZ(90deg);   } } #spinner {   -webkit-animation-name: spincube;   -webkit-animation-timing-function: ease-in-out;   -webkit-animation-iteration-count: 1;   -webkit-animation-fill-mode: forwards;   -webkit-animation-duration: 8s;   -webkit-transform-style: preserve-3d;   -webkit-transform-origin: 60px 60px 0; }

<div id="stage" style="width: 1200px; height: 300px;">  <div id="spinner">    <div class="face1">1</div>    <div class="face2">2</div>    <div class="face3">3</di>  </div></div>

Can't stop animation on last frame

You actually have one extra step and as your background is set as repeat by default, it just go back to the first frame at the end.

.kia-jump {
    width: 320px;
    height: 464px;
    position: absolute;
    top: 1%;
    left: 41%;
    background: url('http://schoolcinema-sconline.rhcloud.com/images/activity/KiaJumpingAnimation.png') left center;
    animation: jumpAnim 1.67s steps(23) 1 forwards;
}

@keyframes jumpAnim {
    100% { background-position: -7590px; }
}

Just did

7920 - (7920/24) = 7590

https://jsfiddle.net/RedBreast/k4rz5tdy/2/

CSS3 animation on hover not stopping on last frame

You could achieve a similar effect with transition instead of the keyframe which will let the hovered state fade out instead of jumping back to 20%:

JS Fiddle

img.fading {
    -webkit-filter: brightness(20%);
    transition: 5s;
    transition-delay: .5s;
}
img.fading:hover {
    -webkit-filter: brightness(100%)
}