12
3
6
9
Pure CSS3 analog clock
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.
Update : I used PHP to get the current time, so in webkit, NO JS !!
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