We’ve been looking at CSS3 a bit this week, particularly the webkit implementation of it, and we’re amazed. This is going to be great for progressive enhancement to sites viewed in modern browsers.

We had no idea it was possible to keyframe and then trigger animations within CSS! Some use cases that spring instantly to mind are:

• News tickers
• Modal dialogue boxes
• Image galleries
• Loading spinners

So if you’re using a recent webkit browser (Chrome, Safari), you should be able to interact with the items in the header. All of these animations are written in CSS, with no Javascript, Silverlight or Flash. They would also work in Firefox 4 beta, and who knows, maybe even IE9, but we’ve only added the vendor-specific property -webkit-.

We can’t seem to animate the background gradients, and the trigger events are restricted to the :pseudo classes (realistically, :hover, :active, :focus), but nonetheless, it’s amazingly functional. The accordion is a bit screwy too because we’ve hosted it in an iframe, you can see a better version here.

Some of the our favourite features are 2D and 3D transforms, keyframe animation, easing, multiple transforms and auto starting animations.

You’ll see that the source code CSS is all over the place in the example above, this is not meant to be a masterclass, just a playground. Here are the resources and tutorials we used:

• 7 javascript-effect alternatives using CSS3 for webkit browsers | Web Developer Juice
• CSS3 . Info – All you ever needed to know about CSS3
• CSS3 Transitions – Are We There Yet? | samuli.hakoniemi.net
• Cubic Bezier Timing Function
• CSS3 Wizardry
• Surfin’ Safari – Blog Archive » CSS Animation
• Safari CSS Visual Effects Guide: Introduction
• Safari CSS Visual Effects Guide: Animations
• Safari CSS Visual Effects Guide: Transforms
• Super Cool CSS Flip Effect with Webkit Animation
• web design | Nimbupani Designs