CSS 实现打字机效果中的标点停顿：纯 CSS 动画控制方案-html教程-PHP中文网

CSS 实现打字机效果中的标点停顿：纯 CSS 动画控制方案

无需 JavaScript，仅用 CSS 的 animation-play-state 和关键帧时间轴规划，即可在多行文本打字机动画中实现逗号、句号等标点处的自然停顿。

无需 javascript，仅用 css 的 `animation-play-state` 和关键帧时间轴规划，即可在多行文本打字机动画中实现逗号、句号等标点处的自然停顿。

要实现「多行带标点停顿的打字机效果」，核心思路是：将停顿转化为动画时间轴上的静止区间，而非依赖 JS 控制播放/暂停。animation-play-state: paused 虽可手动触发暂停，但它需配合 JS 使用——而真正适合纯 CSS 方案的是 精细化的关键帧（@keyframes）时间分配。

✅ 推荐做法：通过 steps() + 精确百分比关键帧，在标点位置延长停留时间
例如，一段文本 "Hello, world. How are you?" 中，逗号后停顿 1.2s，句号后停顿 2s，可通过以下方式实现：

.typewriter {
  overflow: hidden;
  white-space: nowrap;
  animation: type 5.8s steps(26, end), pause-comma 5.8s, pause-period 5.8s;
}

@keyframes type {
  0% { width: 0; }
  30% { width: 10ch; }   /* "Hello," */
  45% { width: 10ch; }   /* 持续显示（模拟逗号停顿）*/
  50% { width: 17ch; }   /* "Hello, world." */
  75% { width: 17ch; }   /* 句号后停顿 */
  100% { width: 26ch; }  /* 全文显示 */
}

/* 可选：用独立动画控制特定停顿节奏，提升可维护性 */
@keyframes pause-comma {
  0%, 30%, 45% { opacity: 1; }
  45.1%, 50% { opacity: 1; }
}

⚠️ 注意事项：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

steps(n, end) 是实现逐字显示的基础，n 应略大于字符总数；
所有停顿必须预设在关键帧百分比中，因此适用于静态、已知内容；
多行支持需结合 line-height 和 height 动画，或使用 ::after 伪元素 + content 配合多段动画链式触发；
若内容动态生成，纯 CSS 方案受限，此时建议改用轻量 JS（如 requestAnimationFrame + textContent 截取），但本方案在文档型页面（如介绍页、Landing Page）中简洁高效、性能优异。

总结：纯 CSS 实现标点停顿的关键不在于“暂停动画”，而在于“设计动画节奏”——把停顿当作动画时间轴上的一段恒定状态，用百分比精准锚定，既符合语义节奏，又完全脱离脚本依赖。