Pure css3 analog clock (with a little cheat)

Written by Alex Wolkov

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
  • http://doggedadew.blogspot.com Edward Rico

    If only I had a buck for every time I came here! Superb article!

  • Shantae Capelli

    Cool blog. Thank you!