animation-delay: -43200s
motion
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);