The days of Adobe Flash are behind us, but animation on the web is not dead. This post is an overview about getting started with CSS animation.
Why Use Animation?
Animation adds movement and emotion to web and user interfaces. This creates visual interest and enhances the user’s experience. In his article, Transitional Interfaces, Pasquale D’Silva shows how animations can clarify context while navigating user interfaces.
Are CSS Animations Ready to Use?
CSS3 animations are relatively well supported, but you should still apply some caution. Some older browsers don’t support these animations. Provide fallbacks if you plan on using CSS3 animations for core functionality.
There are many tools to help you write CSS animations including:
- CSS3 Generator
- CSS3 Please! The Cross-Browser CSS3 Rule Generator
Beyond CSS3 Animations
Regardless of the current tools, animation can still be very time intensive and should be carefully planned and budgeted for so that the animations enhance rather than distract the user’s attention.
Are you a fan of animation on the web or does it give you too many flashbacks to Flash sites? Please leave your thoughts in the comments.