Pure CSS Stopwatch ⏱️ 관련

CSS > Article(s)

---

Article(s)

---

Pure CSS Stopwatch ⏱️

Nice demo by Jhey in which he created a Pure CSS Stopwatch: 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: Each digit gets its own CSS Animation with its own timing. Inside each animation the value of … Continue reading ”Pure CSS Stopwatch ⏱️”

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

See Pure CSS Working Stopwatch 😎 (@property) by 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

9 Underutilized Features in CSS

---

List assembled by Jordan Little: The CSS calc() function The pointer media query The currentColor variable The :valid, :invalid, and :empty pseudoclasses Counters using only CSS Predictable tables with fixed layout Easy form states using adjacent sibling selectors Algebraic nth-child() selection Animating elements with animation-fill-mode As a tenth feature I’d like to add the use … Continue reading ”9 Underutilized Features in CSS”

Pure CSS Stopwatch ⏱️

---

Nice demo by Jhey in which he created a Pure CSS Stopwatch: 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: Each digit gets its own CSS Animation with its own timing. Inside each animation the value of … Continue reading ”Pure CSS Stopwatch ⏱️”