Countdown Timer

A visual countdown using @property integers, CSS counters, and steps() animation.

Published July 8, 2026

Demo

Seconds

HTML
				
				<div class="timer-num"></div>

CSS
				
				@property --countdown {
  syntax: "<integer>";
  initial-value: 10;
  inherits: false;
}

.timer-num {
  --countdown: 10;
  counter-reset: num var(--countdown);
  animation: count-down 10s steps(10) infinite;
}

.timer-num::after {
  content: counter(num);
}

@keyframes count-down {
  from { --countdown: 10; }
  to   { --countdown: 0; }
}

			

How it works

@property registers --countdown as an <integer> type, allowing CSS to animate it as a number. counter-reset: num var(--countdown) sets a CSS counter to that value, and content: counter(num) displays it in a ::after pseudo-element. steps(10) makes the animation jump in 10 discrete steps rather than interpolating smoothly — each step changes the displayed number. The ring uses conic-gradient driven by the same property.