Make CSS3 animations stay put after they're performed

Animations are one of the most excíting features of CSS3. They allow you to display various moving píctures to the user without Flash, JavaScript, or even images. This can be particularly helpful in situations where Flash may not be available, such as on iPhones. One problem with animations, however, is that by default, they snap back to their original position once the animation is finished. That's the opposite of what typically happens when creating an animation with jQuery or Flash-based tools such as Adobe Captivate. Since animations are often used to transition from one state to another, you'll likely want the fínal frame of the animation to stay put, just as you'd expect from these other tools.

Fortunately, there's a way to make CSS3 keep the property setting at the end of the animation and not have the elements "snap back" to their original state. Simply use the animation-fill-mode property (and its -webkit- equivalent for Chrome and Safari browsers). By setting it to "forwards", you can cause the animation to freeze in its fínal position when it's finished:

animation-fill-mode:forwards;
-webkit-animation-fill-mode:forwards;

One caveat is that it matters where you put this property. To ensure that it has an effect (in supporting browsers), place the property after you declare the animation's duration.