Animasi menaip akan berhenti pada bilangan aksara yang ditetapkan setiap kali. Jika saya memanjangkan kenyataan, ia rosak. Jika saya memendekkan kenyataan, ia berterusan sehingga bilangan aksara yang ditetapkan dicapai. Saya tahu saya perlu menukar bilangan langkah (50), tetapi itu sebenarnya bukan nombor yang dihentikan, ia berhenti pada 28.

@import url('https://fonts.googleapis.com/css2?family=Courier+Prime&family=Source+Code+Pro:wght@200&display=swap');
html {
  min-height: 100%;
  overflow: hidden;
}

body {
  height: calc(100vh - 8em);
  padding: 0;
  margin: 0;
  color: #FFF;
  font-family: 'Courier Prime', monospace;
  background-color: rgb(0, 0, 0);
}

.video-bg {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  min-height: 100%;
  opacity: .5;
}

.line {
  position: relative;
  top: 75%;
  width: 24em;
  margin: auto;
  border-right: 2px solid #FFF;
  font-size: 18px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  transform: translateY(-50);
}

.anim-typewriter {
  animation: typewriter 5s steps(50) 1s 1 normal both, blinkTextCursor 750ms steps(40) infinite normal;
}

@keyframes typewriter {
  from {
    width: 0;
  }
  to {
    width: 16em;
  }
}

@keyframes blinkTextCursor {
  from {
    border-right-color: transparent;
  }
  to {
    border-right-color: rgb(155, 211, 71);
  }
}

<p class="line anim-typewriter">Under construction...</p>