Pure CSS HTML Clock Hand

A pure css/html clock movement example

by Kearnan Kelly

HTML

<div id="clock_container">
  <div id="seconds"></div>
</div>

CSS

#clock_container {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 2px solid black;
}

#seconds {
  height: 50%;
  width: 0px;
  box-sizing: border-box;
  border: 1px solid black;
  top: 0%;
  left: 50%;
  position: absolute;
  transform-origin: bottom;
  /* of-course, would be 60s */
  animation: secondsMotion 10s infinite linear;
}


@keyframes secondsMotion {
  0% {
    transform: rotate(var(--sec-rot-start)); /* css only set at 0deg */
  }

  100% {
    transform: rotate(var(--sec-rot-end)); /* css only set at 360deg */
  }
}

JavaScript

// js css val set entry for correct time if wanted
var sec = new Date().getSeconds();
var sec_start = (sec/60) * 360 + 'deg';
var sec_end = (sec/60) * 360 + 360 + 'deg';
document.documentElement.style.setProperty("--sec-rot-start", sec_start);
document.documentElement.style.setProperty("--sec-rot-end", sec_end);