Как исправить элемент в css анимации

Question

Я хочу сделать CSS анимацию обратного отсчета, которая идет от 0 до 7, но когда она достигает 7, она исчезает, я хотел бы знать, как я могу заставить 7 оставаться на месте.

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: "0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A";
}

.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>

Answer 1

Настройте свой код, как показано ниже:

_{Удален ненужный код, чтобы оставить только соответствующий}

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:-7em; /* Here 7 */
  content: "0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9\A"; /* You can have all the numbers here */
  animation: animate 7s steps(8); /* Here 8 */
}

@keyframes animate {
  0% {
    top: 0;
  }
  100% {
    top: -8em;  /* Here 8 */
  }
}

<span class="box"></span>

С некоторыми CSS переменными, чтобы иметь что-то общее c:

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: "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)); 
}

@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>