PHPnews.io

Pure CSS Stopwatch ⏱️

Written by Bram.us / Original link on Feb. 19, 2021

Nice demo by Jhey in which he created a Pure CSS Stopwatch:

https://www.bram.us/wordpress/wp-content/uploads/2021/02/IYOlKeUbdCj03LJf.mp4

See the Pen Pure CSS Working Stopwatch 😎 (@property) by Jhey (@jh3y) on CodePen.

It uses a clever combination of CSS Animations, CSS Counters, and @property:

  1. Each digit gets its own CSS Animation with its own timing.
  2. Inside each animation the value of a CSS Counter is adjusted.
  3. 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

bram bram bram tutorialzine 92 bram

« HTML Table with Sticky Header Row and Sticky First Column - front-of-the-front-end / back-of-the-front-end »