This stopwatch uses @property to allow CSS variables to be used in @keyframes animation.

The stopwatch uses just one @keyframes for all the number animations with a change in CSS variables to alter the parameters.

The animation CSS is:

@keyframes digital {
  0% {--lft:0;}
  100% {--lft: var(--imgs);}
}

With --lft an integer value.

The --lft value is then used to create a counter value which is added to empty divs ::before and ::after using content:

counter-reset: my-counter var(--lft);
content: counter(my-counter);

The only browser that does not yet support @property is Firefox, so this browser fails to animate the stopwatch.

Using this method there is no need to use numbers in the html code:

<div id="timer">
  <div id="number-1"></div><span>:</span>
  <div id="number-2"></div><span>.</span>
  <div id="number-3"></div>
  <h2>Minutes</h2><h2>Seconds</h2>
</div>