Stopping a CSS3 Animation on last frame

Question

I have a 4 part CSS3 animation playing on click - but the last part of the animation is meant to take it off the screen.

However, it always goes back to its origin

Answer 1

I just posted a similar answer, and you probably want to have a look at:

http://www.w3.org/TR/css3-animations/#animation-events-

You can find out aspects of an animation, such as start and stop, and then, once say the 'stop' event has fired you can do whatever you want to the dom. I tried this out some time ago, and it can work, but I'd guess you're going to be restricted to webkit for the time being (but you've probably accepted that already). Btw, since I've posted the same link for 2 answers, I'd offer this general advice: check out the W3C - they pretty much write the rules and describe the standards. Also, the webkit development pages are pretty key.

Answer 2

Nobody actualy brought it so, the way it was made to work is animation-play-state set to paused.