Die Eingabeanimation in CSS überschreitet den angegebenen Grenzwert

Question

Die Tippanimation stoppt jedes Mal bei der eingestellten Zeichenanzahl. Wenn ich die Anweisung erweitere, bricht sie ab. Wenn ich die Anweisung verkürze, läuft sie weiter, bis die eingestellte Zeichenanzahl erreicht ist. Ich weiß, dass ich die Anzahl der Schritte (50) ändern muss, aber das ist nicht wirklich die Zahl, bei der es stoppt, es stoppt bei 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>

Answer 1

您可以通过减小此处的宽度参数来调整关键帧的结束位置：

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

将宽度更改为 13em，光标将在字符串末尾闪烁：

@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: 13em;
  }
}

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

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

这是最简单的方法，但将来如果您有动态大小的字符串，您需要根据字符串长度（字符数）更新宽度。