How to fixed an element in css animation

Question

I want to do a CSS Countdown animation, which goes from 0 to 7, but when it reaches 7, it disappears, I would like to know how I can make 7 stay fixed.

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>

Temani Afif · Accepted Answer · 2020-04-20T13:34:57.007

Adjust your code like below:

_{Removed uncessary code to keep only the relevant one}

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>

With some CSS variables to have something generic:

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>

How to fixed an element in css animation

1 Answers1