html - 如何修复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 变量来拥有一些通用的东西:

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>