Exploring @property and its Animating Powers

Over at CSS-Tricks Jhey Tompkins has written a solid piece on the amazing @property and the possibilities it opens:

We can give the browser the information is needs to transition and animate those properties!

Covered in the post, amongst many other interesting demos, are Jhey’s own Pure CSS Stopwatch and my own animated gradient border

Exploring @property and its Animating Powers →

Pure CSS Stopwatch ⏱️

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

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