CSS Animated Watch

Fun With CSS Animations

As a proof of concept for my job, I created a CSS animated Tiffany watch that runs in real time. The watch hands move in sync with the current local time. The hardest part was actually cutting the watch hands out of the image using Photoshop and filling in the holes on the watch face.

It runs by grabbing the current time via JavaScript and then calculating the degrees of rotation to apply to the watch hands. At that point, the initial rotation values are applied to the hands and the CSS keyframe syntax is generated which controls the ticking of the watch. Even though JavaScript is required for the initial setup of the watch, it is entirely powered by CSS after loading.