Flip Clock — CSS Flip Clock HTML CSS JS

The flip clock — where each digit tumbles over like an old airport split-flap board — is one of the most recognisable retro UI effects. This snippet builds a live, ticking flip clock in plain HTML, CSS, and vanilla JavaScript, where each digit flips only when it actually changes, with no images and no library.

A digit built from two halves

Each digit cell is split into a top and bottom half, both showing the same number, separated by a thin gap — exactly like a real flap display. The number is positioned so the top half shows its upper portion and the bottom half its lower portion, with overflow: hidden clipping each. This two-half construction is what makes the flip believable: the animation can replace the top while the bottom stays put, mimicking how a physical flap hinges in the middle.

The flip is a hinged leaf

When a digit changes, a temporary "leaf" element is created showing the *old* value, layered over the top half with transform-origin: bottom. A CSS keyframe rotates it from flat to −90° (rotateX), so it hinges downward and disappears as if falling forward — revealing the new top value underneath. When the animation ends, the bottom half is updated to the new value and the leaf is removed. This old-value-falls-to-reveal-new-value sequence is the precise mechanic of a split-flap, and doing it with a disposable leaf keeps the static digit clean.

Only changed digits flip

setDigit compares the incoming value to what's shown and returns early if they're equal — so on a normal tick only the seconds' units digit flips, while the tens, minutes, and hours sit still until they actually roll over. This selective animation is both more realistic (a real flap board only moves the flaps that change) and far more efficient than re-animating all six digits every second. The blinking colons, animated with a stepped keyframe, complete the clock feel.

A precise, self-correcting tick

The clock reads the real Date every second via setInterval, so it always shows the actual system time and never drifts from accumulated error — each tick is recomputed from scratch rather than incremented. padStart keeps every unit two digits, and the units are laid out as hours, minutes, seconds with the structure generated in JavaScript so adding or removing a unit is trivial.

Drop-in and adaptable

The clock is self-contained and themeable — change the flap colour, digit size, or fonts with CSS. Point it at a target time instead of now and the same digit-flip mechanic becomes a countdown. It's a clear, complete reference for the split-flap animation technique that powers flip clocks, countdowns, and animated number displays. One detail worth keeping if you fork this: the leaf is created and removed for every flip rather than left in the DOM and reused, which keeps each digit cell free of leftover animation state between flips — reusing a single leaf node would require manually resetting its animation, which is more failure-prone than letting the browser garbage-collect a short-lived element.