CSS3 Animation Question

Question

How can I make a CSS3 Animation play to the end and then stop dead. I don't want it to return the elements being transformed back to their initial states.

Right now I'm using some javascript to add a class to the element after the animation's duration with the same properties as 100% in the animation.

Answer 1

In case this question is still open, I don't think this is possible using CSS3 animations as they're currently specified:

An animation does not affect the computed value before the application of the animation, before the animation delay has expired, and after the end of the animation.

However, you should be able to use CSS3 transitions for basic effects. There's a slide in the html5rocks.com presentation that shows how to do this. Here's the relevant [paraphrased] excerpt:

#box.left { margin-left: 0; }
#box.right { margin-left: 1000px; }
#box { -webkit-transition: margin-left 1s ease-in-out; }

// Run this to animate to the left
document.getElementById('box').className = 'left';

// Run this to animate to the right
document.getElementById('box').className = 'right';