Wednesday, June 1st, 2022

The clock: a css animation

Sorry, but this animation is not available for your device

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.