This content originally appeared on Bram.us and was authored by Bramus!
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 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
This content originally appeared on Bram.us and was authored by Bramus!
Print
Share
Comment
Cite
Upload
Translate
Updates
There are no updates yet.
Click the Upload button above to add an update.
APA
MLA
Bramus! | Sciencx (2021-02-19T00:32:22+00:00) Pure CSS Stopwatch ⏱️. Retrieved from https://www.scien.cx/2021/02/19/pure-css-stopwatch-%e2%8f%b1%ef%b8%8f/
" » Pure CSS Stopwatch ⏱️." Bramus! | Sciencx - Friday February 19, 2021, https://www.scien.cx/2021/02/19/pure-css-stopwatch-%e2%8f%b1%ef%b8%8f/
HARVARDBramus! | Sciencx Friday February 19, 2021 » Pure CSS Stopwatch ⏱️., viewed ,<https://www.scien.cx/2021/02/19/pure-css-stopwatch-%e2%8f%b1%ef%b8%8f/>
VANCOUVERBramus! | Sciencx - » Pure CSS Stopwatch ⏱️. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/02/19/pure-css-stopwatch-%e2%8f%b1%ef%b8%8f/
CHICAGO" » Pure CSS Stopwatch ⏱️." Bramus! | Sciencx - Accessed . https://www.scien.cx/2021/02/19/pure-css-stopwatch-%e2%8f%b1%ef%b8%8f/
IEEE" » Pure CSS Stopwatch ⏱️." Bramus! | Sciencx [Online]. Available: https://www.scien.cx/2021/02/19/pure-css-stopwatch-%e2%8f%b1%ef%b8%8f/. [Accessed: ]
rf:citation » Pure CSS Stopwatch ⏱️ | Bramus! | Sciencx | https://www.scien.cx/2021/02/19/pure-css-stopwatch-%e2%8f%b1%ef%b8%8f/ |
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.