Test Your Mobile Site with DeviceAnywhere
Set up Dreamweaver’s FTP Features
Choose Widgets to Display on Your Blog

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
Download Files from Galleria for Your Website
Publishing Files to a Web Server with FTP
How to Activate User Agent Switcher in Safari
Tweak the Mobile Switcher
Detect and Direct Mobile Devices
Advertisement

Inside Dummies.com