如何使用css使TypeWriter文本效果循环

你好，我正在尝试用css在我的页面上做一个打字机文本效果，我得到了一个特殊的片段，它提供了一个打字效果，但它确实发送了循环，我需要它来循环

这是我使用的初始代码

<div class="typewriter">
  <h1>The cat and the hat.</h1>
</div>

/* 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: orange; }
}

猫和帽子。
/*特定于演示的样式*/
.打字机h1{
溢出：隐藏；/*确保在播放动画之前不会显示内容*/
右边框：.15em实心橙色；/*打字机光标*/
空白：nowrap；/*将内容保留在一行上*/
边距：0自动；/*在键入时提供滚动效果*/
字母间距：.15em；/*根据需要调整*/
动画：
键入3.5s步骤（40，结束），
闪烁插入符号。75秒步结束无限；
}
/*打字效果*/
@关键帧键入{
从{宽度：0}
到{宽度：100%}
}
/*打字机光标效应*/
@关键帧闪烁插入符号{
从，到{边框颜色：透明}
50%{边框颜色：橙色；}
}

---

有人能详细解释一下如何制作这个循环吗？我在网上看到，你需要在其中加入无限单词，但我不知道在哪里添加这个，请帮助添加动画迭代计数：无限到

。打字机h1

将循环它

/*特定于演示的样式*/
.打字机h1{
溢出：隐藏；
/*确保在播放动画之前不会显示内容*/
右边框：.15em实心橙色；
/*打字机光标*/
空白：nowrap；
/*将内容保持在一行上*/
保证金：0自动；
/*在键入时提供滚动效果*/
字母间距：.15em；
/*根据需要进行调整*/
动画：输入3.5s步数（40，结束），闪烁插入符号。75s步数结束无限；
动画迭代次数：无限；
}
/*打字效果*/
@关键帧键入{
从{
宽度：0
}
到{
宽度：100%
}
}
/*打字机光标效应*/
@关键帧闪烁插入符号{
从，到{
边框颜色：透明
}
50% {
边框颜色：橙色；
}
}

猫和帽子。

当我在这里运行它时，它会工作，但当我在浏览器上运行它时，它会工作，无论如何，谢谢