I love css3, have I told you already? Love it.

Anyway, I wanted to see what I can do with transitions and animations in webkit, and I made this :

Css only (well almost) analog clock

Click the Image to see the live demo

Support :

Firefox + Webkit browsers
In firefox I use javascript to move the properties
In Webkit, all the animation and the calculation is in CSS!!
I did cheat however : I used js to determine the current time. Now way to do that in css. I didn’t want to include jquery here, as u can see all the code is pure js, but I had to because it’s dufficult to do browser detection properly with js.

Lessons learned :

• CSS3 is awesome!! Especially the way webkit does it (transitions, animations)
  But it still has a LONG way to go untill we see compability cross browsers
• In Safari and Mobile safari, the arrows were jagged untill I gave the css-shadow, So it seems that giving this property turns on antialiasing somehow. Cool