The other clock hands receive steps(0), effectively creating linear animation for them. if stepper is 60, that value is used for steps() since only the second hand will have this quality, it “ticks” in the animation.the current time) to 360° from this position the duration is determined (in milliseconds) by multiplying 60 to the power of i + 1. the Web Animation API transforms each of the hands from their initial orientation (i.e.If i is 0, the variable stepper is set to 60 using a ternary operator.the for loop goes through the entire array, incrementing the variable i.initDeg creates an array of the current time - hours, minutes and seconds - converted into degrees.hands is an array of the clock hand ids.The JavaScript, added to the bottom of the page: The hands are exactly positioned using calc, accounting for their different widths and heights: The hands are absolutely positioned inside the relatively positioned clock, with their transforms centered at the bottom of each hand. The markup consists of a with three elements inside it:īox-shadow: 0 0 4px 4px rgba(0, 0, 0, 0.3) (Due to the newness of the Web Animation API, this demo will currently only work in Chrome and Firefox).

To do that, we need JavaScript… and if we’re starting with that, it made sense to experiment with the Web Animation API, showing that it too can use steps() animation for the second hand. While it’s possible to create the clock movement with HTML elements, CSS transforms and animation, it’s not possible to set such a clock to the correct time for the user. I’ve previously demonstrated an analog clock made with SVG and JavaScript, which I thought used a particularly elegant technique.

Online analog clock