Contact Us
  • CSS Animation Overview

    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.

    See the Pen Tape Recorder by Scott (@scottohara) on CodePen

    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:

    Learning Resources

    Beyond CSS3 Animations

    There are other ways of creating animations for the web such as using Javascript or the HTML 5 Canvas element. Tools such as Adobe Edge Animate and Hype are providing designers with visual tools that create the code required to bring these animations to the web.

    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.

    Speak Your Mind