Welcome to the home of the CSS Clock. As a clock is essential to day-to-day life, it wouldn't make sense if there was no CSS version.

This Clock works purely with CSS, using Javascript only to set the initial position of the hands and digits..

Most of the elements are absolutely positioned to achieve the effect seen here. The interval markers are positioned absolutely, and rotated using pure CSS.

To have the animation of the clock hands and digits, CSS keyframes are being used, but this is where the javascript comes in! CSS Keyframes allow you to have a set animation from one thing to another, e.g. from 0 degrees of a circle to 360 degrees. That's all well and fine if you want it to always go from 12 0'clock to 12 o'clock. But we want it to start from the time that the user visited the page, and in order to do that we get the current date using Javascript, then get the seconds, minutes, and hours from that.

After we have the current time, we can then determine how many seconds have gone by in the day, then set the starting point of each hand/digit accordingly. The way that the current spec allows you to set an animation starting point is by using a negative value within the CSS property, e.g. .second-hand {-webkit-animation-delay: -17s;}. What this does is counter-intuitive, this sets the animation to start from where it would be after 17 seconds, but it starts immediately. This is exactly what we wanted for this!

This new CSS rule is then injected in to the head of the document, and then civilisation is restored.