L'animation d'entrée en CSS dépasse la limite spécifiée

Question

L'animation de frappe s'arrêtera à chaque fois au nombre de caractères défini. Si je prolonge la déclaration, elle se brise. Si je raccourcis l'instruction, elle continue jusqu'à ce que le nombre de caractères défini soit atteint. Je sais que je dois changer le nombre de pas (50), mais ce n'est pas vraiment le nombre auquel ça s'arrête, ça s'arrête à 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

Vous pouvez ajuster l'endroit où se termine l'image clé en réduisant le paramètre de largeur ici :

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

Changez la largeur à 13em et le curseur clignotera à la fin de la chaîne :

@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>

C'est le moyen le plus simple, mais à l'avenir, si vous avez des chaînes de taille dynamique, vous devrez mettre à jour la largeur en fonction de la longueur de la chaîne (nombre de caractères).