Date : 8th August 2025

For all the latest browsers

Click/Tap 'START' and 'STOP'.

Click/Tap 'RESET' to return to zero.

RESET

8

8:

8

8.

8

8

Information

This just shows how useful @container styles can be.

This uses the widths and heights of three nested divs to control the stopwatch numbers.

The three div sizes are @keyframes animated from 0px to 10px width and height, with the values then converted into ::after content text, which is then displayed horizontally in the 'timer' div.

So three @keyframes and three 'containers' to animate a stopwatch.

Please consider making a donation, every little helps.