Make CSS3 animations stay put after they've performed

 Mar 07, 2014

Animations, defined by the keyframe rule, are one of the most exciting features of CSS3. It allows you to display various moving pictures 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. To create animations, the keyframe rule needs be applied in an element style definition using the 'from' and 'to' keywords to indicate where the animation starts and finishes. Note that these keyframe rules and animations are currently only available in Mozilla and WebKit based browsers. Once you've defined the animation, you can alter its properties with the CSS shorthand property codes. Some of these property codes include animation, animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, and animation-play-state. However, one problem with animations 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 final 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 final 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.

How do your Excel skills stack up?   

Test Now  

About the Author:

New Horizons  

New Horizons is Australia's leading corporate training provider, and has been educating business professionals for over 15 years in the areas of Professional Development, Microsoft Office & Adobe Applications, and IT Technical. Our aim through this blog is to bring you relevant stories, articles, and tips & tricks that can help you to improve your skills and productivity in the workplace. Our expert trainers will also be posting their own articles from time to time, so be sure to keep an eye out.

Read full bio
top
Back to top