# CSS-Powered Clock

### Animations, Custom Properties, & Optional JS

This clock relies on CSS animations to function, from holding time to rotating each hand.

For ease of configuration, CSS custom properties ( --hour , --minute , --second ) are used to define the initial clock time. From there, a simple animation rotates (using a steps() property) each hand of the clock at the appropriate pace.

While JavaScript is used to set the initial time in this example, it is not necessary for the clock to function. You manually set these by just changing the CSS properties.

I cannot vouch for the accuracy of this clock if you let it go for an extended period of time. My recommendation would be to not depend on a CSS clock to keep track of time.