是的，你需要一些脚本，至少要检测动画的结尾，然后刷新html内容，你可以把所有要显示的消息存储在一个数组中，然后循环遍历它，然后你必须根据显示的文本长度来调整速度。

var messages=["message1","message2  message2 message2","message3 message3"];
var rank=0;

// Code for Chrome, Safari and Opera
document.getElementById("myTypewriter").addEventListener("webkitAnimationEnd", changeTxt);

// Standard syntax
document.getElementById("myTypewriter").addEventListener("animationend", changeTxt);

function changeTxt(e){
  _h1 = this.getElementsByTagName("h1")[0];
  _h1.style.webkitAnimation = 'none'; // set element animation to none
   setTimeout(function() { // you surely want a delay before the next message appears
      _h1.innerHTML=messages[rank];
      var speed =3.5*messages[rank].length/20; // adjust the speed (3.5 is the original speed, 20 is the original string length
      _h1.style.webkitAnimation = 'typing '+speed+'s steps(40, end), blink-caret .75s step-end infinite'; //  switch to the original set of animation      
      (rank===messages.length-1)?rank=0:rank++; // if you have displayed the last message from the array, go back to the first one, else go to next message
    }, 1000);
}

.typewriter h1 {
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .15em solid orange; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: .15em; /* Adjust as needed */
  animation: 
  typing 3.5s steps(40, end),
  blink-caret .75s step-end infinite;
}


body {
  background: #333;
  color: #fff;
  font-family: monospace;
  padding-top: 5em;
  display: flex;
  justify-content: center;
}


/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: blue; }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="typewriter" id="myTypewriter">
  <h1>The cat and the hat.</h1>
</div>

还要检查不同的语法https://www.w3schools.com/jsref/prop_style_animation.asp

这可以通过jQuery（或者JavaSript，如果你喜欢的话）来完成。简单地说，等到动画完成，然后替换包含的HTML。

setTimeout(function () {
  $(".typewriter").html("<h1>This is a really cool string</h1>")
},3500);

.typewriter h1 {
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .15em solid orange; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: .15em; /* Adjust as needed */
  animation: 
  typing 3.5s steps(40, end),
  blink-caret .75s step-end infinite;
}


body {
  background: #333;
  color: #fff;
  font-family: monospace;
  padding-top: 5em;
  display: flex;
  justify-content: center;
}

/* DEMO-SPECIFIC STYLES */
.typewriter h1 {
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .15em solid orange; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: .15em; /* Adjust as needed */
  animation: 
    typing 3.5s steps(40, end),
    blink-caret .75s step-end infinite;
}

/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: blue; }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="typewriter">
  <h1>The cat and the hat.</h1>
</div>

你不需要javascript。

不要被愚弄。这只能用CSS来完成，请参阅：https://stackoverflow.com/a/57887588/2397550的工作示例。您可以将CSS动画拆分为几个单独的动画，并使用animation-delay依次执行它们。
你的解决方案的一个（另一个）缺点是它需要等宽字体，这是我不希望有的限制。