Nice demo by Jhey in which he created a Pure CSS Stopwatch:
It uses a clever combination of CSS Animations, CSS Counters, and @property
:
- Each digit gets its own CSS Animation with its own timing.
- Inside each animation the value of a CSS Counter is adjusted.
- By defining those values as numbers using CSS
@property
, CSS knows how how to “animate” (read: interpolate) the values.
The animation play state is controlled using a checkbox, as detailed here.
💁♂️ CSS Counters is one of the 9 Underutilized CSS Features