While browsing 2D animations, I found my self thinking "I bet I could recreate that in CSS". I found this watch animation GIF that I thought looked pretty good. So I challenged myself to recreate it in code.

I first needed to recreate it as SVG layers. At the time, I was using Sketch. So I used that to redraw it layer by layer. Then I exported it as an SVG.

Writing the code, most of work was around @keyframe animations, tinkering around with the timing.

In 2023, I resurrected this project to add to my new portfolio. Over the years, browser changes had caused some of my CSS to break; specifically related to everything originating from the center of the design. I thought it might have had something to do with transform-origin. But after a some debugging, I realized it was related to adding transforms to groups. So I had to update the positioning of pretty much all the layers and ended up rebuilding a lot of it. I also transferred the project over to CodePen instead of hosting it as it's own webpage so that viewers could more easily check the code. The last new change I added was the "Replay" button just to make replaying the animation part of the project itself.

Oh, one more thing. If you watch (no pun intended) closely, the hands of the watch revolve in real time, including the hour hand. Try leaving it running in the background and come back later.