JSFiddle - React, Tailwind, and code Playground

HTML

<span class="box" style="--c:7"></span>

<span class="box" style="--c:5"></span>

<span class="box" style="--c:2"></span>

CSS

.box {
  border: 2px solid;
  padding: 0 10px;
  display: inline-block;
  overflow: hidden;
  height: 1em;
  line-height: 1em;
  font-size: 50px;
}

.box:after {
  position: relative;
  display:inline-block;
  white-space: pre;
  content: "0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9\A"; 
  animation: animate calc(var(--c)*1s) /*steps(calc(var(--c) + 1))*/ forwards; /* uncomment the steps to discret animation */ 
}

@keyframes animate {
  100% {
    transform:translateY(calc(-1em*(var(--c) + 1)));
  }
}