Advertisement
Online Test Banks
Score higher
See Online Test Banks
eLearning
Learning anything is easy
Browse Online Courses
Mobile Apps
Learning on the go
Explore Mobile Apps
Dummies Store
Shop for books and more
Start Shopping

CSS 3 Animations for Websites

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.

image0.jpg

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.

blog comments powered by Disqus
Advertisement
Advertisement

Inside Dummies.com

Dummies.com Sweepstakes

Win an iPad Mini. Enter to win now!