Css3 Analogue Clock

Toy clock with CSS3 animations


Inspired by the clock widgets present on most smartphones, I challenged myself to create a simple online clock.

I loved creating this tiny toy - its simple scope provided a great opportunity to experiment further with two of my favourite tools, CSS3 animations and javascript powered templating.


  • Clock hands are animated using CSS3 animations.
  • Javascript sets the current time - and, since CSS animations pause when a window loses focus, maintains its accuracy.
  • On page load or focus, mustache templating is used to generate a stylesheet that positions each hand and sets it in motion.


Analogue Clock Toy Site