The clock: a css animation

This is a simple CSS based clock that keeps time against hours, minutes and seconds. I put it together over a couple of hours to test a couple of ideas for other projects I’m working on.

First, the clock “ticks”. Instead of a smooth movement, the hands move with a definite gesture from one time mark to the next. This involved a bit of maths, a spreadsheet and a few adjustments to get it to look right. Originally the hour hand did the same thing, although it looked a little odd, so I set it to move smoothly.

Second, a bit of Javascript sets the clock against the time on your computer. This was me testing initial states for animations. If you leave your device switched on it should keep perfect time.

(If it goes to sleep, the animation stops, so you’ll need to reload the page).

My name is Ross Hori

I'm a freelance writer, designer and photographer. By day I create articles, features and reports. At night I take photos and write fiction. Find out more.

Follow Me:

Subscribe to my weekly(ish) email for notes from my ongoing research, photos and more. Just pop your email address in the box below.

Your email stays private

subscribe