Input animation in CSS exceeds specified limit

Question

The typing animation will stop at the set number of characters every time. If I extend the statement, it breaks. If I shorten the statement, it continues until the set number of characters is reached. I know I have to change the number of steps (50), but that's not really the number it stops at, it stops at 28. @importurl('https://fonts.googleapis.com/css2?family=Courier+Prime&family=Source+Code+Pro:wght@200&

P粉725827686 · Answer

You can adjust the end position of the keyframe by reducing the width parameter here:

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

Change the width to 13em and the cursor will flash at the end of the string:

@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);
  }
}

Under construction...

This is the simplest way, but in the future if you have dynamically sized strings, you will need to update the width based on the string length (number of characters).