Css3 Keyframe Animations: End and Stay on the Last Frame

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.

.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>

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>

Maintaining the final state at end of a CSS3 animation

Try adding animation-fill-mode: forwards;. For example, the shorthand would be used like this:

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

How to make the last keyframe of your animation stay after animation is finished

Remove the dual declaration for animation-fill-mode is just forwards :

.fadein{    
  animation:fadein 1.5s;
  animation-timing-function:linear;
  animation-delay:1s;
  animation-fill-mode:forwards;
  animation-iteration-count: 1;
  -webkit-animation-iteration-count: 1;
  -webkit-animation:fadein 1.5s;
  -webkit-animation-timing-function:linear;
  -webkit-animation-delay:1s;
  -webkit-animation-fill-mode: forwards;
}

The demo http://jsfiddle.net/DR9Lu/6/

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/

How to make the animation remain at its last keyframe after hover?

Use transition and consider a big value for the time to fake it

.box {  font-family: Frijole;  opacity: .1;  font-size: 36px;  transition:999s opacity;}
.box:hover {  transition:1s opacity;  opacity:1;}

<div class="box">text here</div>

---

Related Topics