Often when people talk about HTML5 (ourselves included), what we really mean is CSS3. HTML5 and CSS3 are bedfellows through and through, and what CSS3 gives us is greater visual sophistication without resorting to graphics, and the opportunity to create front-end animation and effects usually the reserve of JavaScript.

Common visual elements in Web/UI design such as rounded corners, gradients and drop-shadows can be created with ease with newly introduced CSS properties. Not only does this decrease the amount of images elements we must chop from our designs, but it decreases the server load of files.

Furthermore, with a little creativity, we can create more unusual elements through code. For example, need an arrow : how about give a div two thick borders and rotate 45 degrees?

Best of all, through the application of the -webkit-transition property, CSS3 will smoothly animate between almost all of it’s properties (be it width, height, colour etc), simply when a new value is applied to an element.

The question then is, why use CSS3 animation if JavaScript utilities like jQuery can do it with greater ease?

Aside from “because we can” and “it is the future!” (which yes, it is!), CSS3 animations are substantially quicker than their equivalent JavaScript effects.

So far this has been used extensively to create a variety of growing, sliding, fading UI elements in DuckPad - which had they been done exclusively in jQuery, would have been too heavy for the iPad’s modest processing power.

There is a certain catch however, that to create our CSS3 animations, much of the time we need JavaScript to manipulate all these CSS3 properties. Similarly, there are certain things which would be simply too complex to recreate with CSS3 within our 6 week target, so we resort to trusty old JavaScript!

As such, front-end development has often focussed on how much we can push CSS3 whilst maintaining the degree of reliability and smoothness we, and our users would expect. This takes the ménage à trois  of HTML5, CSS3 and jQuery!