body {
  background: pink;
}

.box {
  color: #fff;
  border: 5px solid ;
  padding: 0 30px;
  border-radius: 25px;
  display: inline-block;
  overflow: hidden;
  height: 1em;
  line-height: 1em;
  font-weight: bold;
  font-size: 16em;
}

.box:after {
  position: relative;
  white-space: pre;
  top:calc(var(--c)*-1em); 
  content: "0A 1A 2A 3A 4A 5A 6A 7A 8A 9A"; 
  animation: animate calc(var(--c)*1s) steps(calc(var(--c) + 1)); 
}

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

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

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

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

body {
  background: pink;
}

.wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(50%, -50%);
}

.wrapper span {
  font-family: bignoodletitling;
  color: #fff;
  border: 5px solid white;
  padding: 0 30px;
  border-radius: 25px;
  margin: 0 10px;
}

.box {
  display: inline-block;
  overflow: hidden;
  height: 1em;
  line-height: 1em;
  font-weight: bold;
  font-size: 16em;
}

.box:after {
  position: relative;
  white-space: pre;
  content: "0A 1A 2A 3A 4A 5A 6A 7A";
}

.box.first-number:after {
  animation: animate 30s steps(10) infinite;
}

@keyframes animate {
  0% {
    top: 0;
  }
  10% {
    top: -10em;
  }
}

<div class="wrapper">
  <span class="box first-number"></span>
</div>