Печатная текстовая анимация не может контролировать ширину

Question

Так что в основном у меня есть эта анимация ввода текста, где некоторый javascript меняет сообщение каждые 3 секунды, а ключевой кадр css используется для «перепечатывания» текста перед тем, как сообщение будет изменено моим кодом jquery. В настоящее время он работает нормально, однако ширина статична, поэтому для меньших миров ширина все равно установлена ​​на 7 каналов, и в конечном итоге выглядит глупо. Я попробовал несколько разных способов, таких как установка ширины на auto, установка div с последующей настройкой width для наследования, однако все идеи потерпели неудачу.

@keyframes terminal {
  0% {width:0}
  20% {width:0}
  50% {width:7ch}
  70% {width:7ch}
  100% {width:0}
}
#terminal-text {
  font-weight: bold;
  margin: 1em 0 .5em 0;
  padding: 0;
  animation: terminal 3s infinite;
  overflow: hidden;
  white-space: nowrap;
  border-right: 4px solid black;
  text-align: left;
}

<center style="display: flex;">
    <h1 style="padding-right:20px;">We</h1>
    <h1 id="terminal-text">innovate.</h1>
</center>
<script type="text/javascript">
    var i = 0;
    words = ['architect.','build.','design.','code.','develop.','innovate.'];
    setInterval(function() {
      $("#terminal-text").text(words[i]);
      i++;
      if (i > words.length) {
        i=0;
      }
    },3000);
</script>

Answer 1

Вместо анимации width, анимация max-width:

var i = 0;
words = ['architect.','build.','design.','code.','develop.','innovate.'];
setInterval(function() {
  $("#terminal-text").text(words[i]);
  i++;
  if (i > words.length) {
    i=0;
  }
},3000);

@keyframes terminal {
  0% {max-width:0}
  20% {max-width:0}
  50% {max-width:100%}
  70% {max-width:100%}
  100% {max-width:0}
}
#terminal-text {
  font-weight: bold;
  margin: 1em 0 .5em 0;
  padding: 0;
  animation: terminal 3s infinite;
  overflow: hidden;
  white-space: nowrap;
  border-right: 4px solid black;
  text-align: left;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<center style="display: flex;">
    <h1 style="padding-right:20px;">We</h1>
    <h1 id="terminal-text">innovate.</h1>
</center>