CSS Only Working Clock

Did you ever wonder if it is posible to create working analog clock in web browser with out javascript at all just with css styling.

I do. So I have create one. At the beginning as with all old clocks you need to set the clock hands to correct time, but its all, after initial setup it works on its own. All of this is possible with css animation.

Try it yourself https://codepen.io/owcakw/pen/vYPPWLg

Key to its working is a long css animation of a hands. 3600s long for minut hand and 43200s long for hour hand. Current time can be set via css variables and animation delay tick (negative value can setup animation progress).

You may render the clock with time taken from the serwer at html request time, and from that it will works alone without a single line of javascript.