This demo illustrates two different aspects of HTML5 (JavaScript/CSS) animation - The "canvas" element, and "webkit" css animation with jQuery UI.

First, click on any of the shapes within the green box to animate them. You can also drag each shape, but only within the green box (canvas element).

Next, click on the red deck of cards repeatedly to deal each of the 12 cards. They can then be dragged anywhere on the screen or clicked to animate. These cards are separate HTML elements, use webkit & jQuery animation, and are separate from the canvas element.

The demo has been designed to work on the iPad and in webkit compatible browsers such as Chrome & Safari. Note: It will not work in Internet Explorer. No attempt has been made to adjust the demo for different screen sizes.