Play a css3 sprite animation once and hold on the last frame

Question

I have an sprite animation that I would like to play once, finish, and hold on the last frame. I've tried changing the iteration count to 1 and added forward to the fill mode but neither worked. Any information or ideas would help.

I'm using this css3 sprite method. http://jsfiddle.net/simurai/CGmCe/light/

-webkit-animation: crouch 1.2s steps(2, end) 1;

Answer 1

This is what the Fill Mode is for. Add the both keyword to your animation definition and, when the animation stops, it should "freeze" at the last frame and stay that way.

EDIT: Ah, I see what's going on. The animation in that example is actually going one frame too far. You need to change the to keyframe to -450px and lower the number of steps to 9, as well as adding the both keyword.

Note that -ms-animation has never existed, and neither -o-animation or -moz-animation are neede anymore. It's just animation and -webkit-animation.

Answer 2

There is no way to stop the animation on the last frame without some javascript (or you could simply use a sprite animation toolkit.

You need to use javascript to:

1. Test if style applied to element background-position == 500px. This may or may not be straight forward. Can we fire an event on attribute changed using javascript? If not then you will have to test it repeatedly using a timer
2. Set the animation-play-state:paused on the above condition using javascript.

OR:

You can find some sprite animation scripts out there which will no doubt allow far more control over the animation.

UPDATE:

To make the tesing of the attribute easier (without the use of setInterval - it uses some nice tricks - you can use a plugin for jQuery.

There is a SO question about mutation events here