animation-delay: -43200s

An analog clock wound by one line of JavaScript

CaveatCSS cannot ask what time it is. The clock is three infinite rotations, and a negative animation-delay winds it: minus four hours starts an animation four hours in, instantly. The only JavaScript writes seconds-since-midnight into a custom property — and that is the whole script. The dial itself is laid out by cos() and sin(), not twelve hand-tuned offsets.

FallbackWith scripts off, the delay falls back to zero and you get a working clock set to midnight. Under prefers-reduced-motion the hands pause — a paused animation still honours its negative delay, so it freezes at the right time instead of springing back to twelve.

.hand {
  transform-origin: 50% 100%;
  animation: turn 43200s linear infinite;
  /* minus = start four hours in. */
  /* this IS how the clock is set */
  animation-delay: calc(var(--now) * -1s);
}
@keyframes turn { to { rotate: 360deg; } }

/* the dial, by trigonometry */
i { translate:
  calc(cos(var(--i) * 30deg) * 70px)
  calc(sin(var(--i) * 30deg) * 70px); }

// the entire script
clock.style.setProperty('--now', seconds);

Published 18 Aug 2026