如何为CSS无限循环打字动画的每次迭代间添加延迟

核心逻辑 #

CSS原生的animation-delay 仅作用于动画首次启动前的等待阶段，无限循环模式下它不会在每两轮动画的间隙生效。要给每轮迭代加间隔，只需要把停顿时长直接整合到动画总周期和关键帧节奏里即可，不需要额外的延迟配置。原来的HTML结构不需要做任何修改，直接调整CSS即可。

具体修改实现 #

1. 重新计算动画总周期：把原本3s的打字执行时长，加上你需要的每轮间隔停顿时长，作为无限循环的总动画时长。比如希望打字完成后停顿3s再重新开始，总周期就是 3s打字过程 + 3s停顿 = 6s。
2. 调整关键帧节奏占比：让逐字打字的动画在周期的前半段完成，后半段全程保持文字完全显示的状态，这部分保持的时间段就是两轮动画的间隔。

可直接复用的修改后CSS代码 #

.type {
  width: max-content;
}
.type h1 {
  /* 总周期设为6s（3s打字+3s停顿），保留原有的逐字steps效果、无限循环配置 */
  animation: typing 6s steps(31) infinite;
  /* 保留原有2s的开场延迟，仅控制首次启动的等待时间，不影响循环间隔 */
  animation-delay: 2s;
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid black;
}

@keyframes typing {
  /* 从0宽度开始逐字展开 */
  0% {
    width: 0;
  }
  /* 到50%周期节点时完成打满全宽的效果（对应3s时长），从该节点到100%周期结束，全程保持100%宽度 */
  50%, 100% {
    width: 100%;
  }
}

自定义间隔时长的方法 #

如果需要调整停顿的长度，直接按比例换算关键帧的节点值即可：

• 比如希望打字完停顿2s再重新循环，总周期就是 3s + 2s = 5s
• 打字过程占总周期的比例为 3s / 5s = 60%
• 只需要把关键帧里的50%改成60%，即60%, 100% {width: 100%}，剩下的60%到100%区间的时长就是2s的停顿间隔。

小提示：如果间隔太长导致动画跳变生硬，可以在打满的节点位置留1%-2%的过渡缓冲，比如把完成打宽的节点设在48%，即48%, 100% {width:100%}，能有效降低跳变的突兀感。

内容的提问来源于stack exchange，提问作者Pranav Borse