Question

94

CSS3 Keyframe Animations: End and stay on the last frame

rated 0 times [ 95] [ 1] / answers: 1 / hits: 61882 / 11 Years ago, mon, october 21, 2013, 12:00:00

I've run into some difficulty trying to play a CSS3 keyframe animation and have the relevant element stick at the last frame after the animation has completed. To my understanding, the property that I have to set for this to work should be animation-fill-mode, which should have the value of forwards; this doesn't do anything.

.animatedSprite { 

    .animation-name: sprite;

    .animation-duration: .5s;

    .animation-iteration-count: 1;

    .animation-direction: normal; 

    .animation-timing-function: steps(3); 

    .animation-fill-mode: forwards;

    //Vendor prefixes... }

This will just play the animation once and then go back to the first frame. I found an example of keyframe animations at JSFiddle ( http://jsfiddle.net/simurai/CGmCe/ ), and changing the fill mode to forwards and setting the iteration count to 1 wouldn't do anything there, either.

Any help would be greatly appreciated.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

armandoh

Add To Favorites

Follow

Total Points: 208

Total Questions: 94

Total Answers: 112

Location: South Sudan

Member since Sun, Jul 11, 2021

3 Years ago

answered 11 Years ago scarlett · Accepted Answer

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>