I’ve been looking at CSS3 a bit this week, particularly the webkit implementation of it, and I’m amazed. This is going to be great for progressive enhancement to sites viewed in modern browsers.
I had no idea it was possible to keyframe and then trigger animations within CSS! Some use cases that spring instantly to mind are:
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 I’ve only added the vendor-specific property -webkit-.
I 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 I’ve hosted it in an iframe, you can see a better version here.
Some of the my 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 I used:
Leave a Reply