A CSS-only countdown.
No JavaScript needed.
This countdown from 10 to 0 is 100% CSS.
Here’s how it works:
1 - @property lets us define a custom CSS variable (—c) and can be animated.
2 - We animate —c from 10 to 0 using a @keyframes animation.
3 - Inside a ::after pseudo-element, we use counter-reset to bind —c to a named CSS counter (count).
4 - Finally, we display the live-updating value using content: counter(...).
No JavaScript. No setInterval. No updating the DOM.
Just clever use of CSS features that are finally starting to mature.
Browser support is pretty good with more than 92%
I’m working on an ebook called “You Don’t Need JavaScript”.
To get notified when it launches 👉 https://theosoti.com/you-dont-need-js/