CSS 3 Animations for Websites

By Janine Warner, David LaFontaine, and Lee Andron from iPhone and iPad Web Design For Dummies

If your goal is to convey information creatively on your website for displaying on the iPad or iPhone, one of the best options for adding animation and other interactive features is to use CSS 3. CSS 3 introduces three main ways to create interactive effects and animations: transformations, transitions, and animations.

CSS 3 adds many new design features, but animation is the most exciting. Using CSS 3, you can make characters walk across the screen, boxes flip over, and images fade away. To demonstrate how animation works with CSS 3, this figure shows a simple ball that bounces in a black box.

No images were used to create this bouncing ball animation. The ball itself — and the action that makes it appear to bounce from the top of the screen to the bottom and back again — was all achieved with just a few lines of CSS 3 code.

Animations like this work in most popular browsers that use WebKit, including Safari (on Mac, Windows, and iOS for iPad/iPhone/iPad) and Chrome (on Mac, Windows, and devices that run Google’s Android operating system).

You can create many great design effects with these features, but the most interactive sites you see on the web today require JavaScript in addition to HTML and CSS.