如何用 CSS 动画实现“逐字入场 → 暂停停留 → 逐字退场”的文本轮播效果-html教程-PHP中文网

如何用 CSS 动画实现“逐字入场 → 暂停停留 → 逐字退场”的文本轮播效果

本文详解如何通过调整 CSS 关键帧时序与 animation-delay 策略，替代单纯依赖 animation-delay 的粗粒度控制，实现文本动画的精准暂停（即“保持可见状态5秒”），而非生硬等待后再触发下一轮动画。

本文详解如何通过调整 css 关键帧时序与 `animation-delay` 策略，替代单纯依赖 `animation-delay` 的粗粒度控制，实现文本动画的精准暂停（即“保持可见状态5秒”），而非生硬等待后再触发下一轮动画。

在 CSS 动画中，“暂停”并非指停止播放（如 animation-play-state: paused），而是指让元素在某一视觉状态（如完全不透明）上持续停留一段时间——这需通过关键帧（@keyframes）的时间比例设计来实现，而非仅靠 animation-delay 延迟整个动画启动。

核心思路是：将单次完整动画周期（例如 12s）合理划分为三阶段：

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

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

下载

入场阶段（0% → 25%，约3s）：opacity 从 0 → 1
停留阶段（26% → 75%，约6s）：opacity 保持为 1（关键！实现“暂停”效果）
退场阶段（76% → 100%，约3s）：opacity 从 1 → 0

以下为优化后的完整实现：

✅ 优化后的 CSS（统一动画逻辑，消除冗余 keyframes）

@keyframes fadeWord {
  0%, 25%   { opacity: 0; }
  29%, 50%  { opacity: 1; }
  51%, 75%  { opacity: 1; } /* 停留区间：维持 fully visible 状态 */
  76%, 100% { opacity: 0; }
}

.fade-line {
  position: absolute;
  opacity: 0;
  animation: fadeWord 12s ease-in-out forwards;
  animation-iteration-count: infinite;
}

/* 第二行文本整体延迟 17s 启动（= 12s 第一行动画 + 5s 停留）*/
.fade-line:nth-child(2) { animation-delay: 17s; }
.fade-line:nth-child(3) { animation-delay: 34s; } /* 可依此类推 */
.fade-line:nth-child(4) { animation-delay: 51s; }

/* 单词级动画复用同一 keyframes，仅通过子元素 delay 错开入场时间 */
.fade-word {
  opacity: 0;
  animation: fadeWord 12s ease-in-out forwards;
  animation-iteration-count: infinite;
}

/* 为每行内单词设置递进延迟（如第2行单词比第1行同位置晚6s入场） */
.fade-line:nth-child(2) .fade-word:nth-child(1) { animation-delay: 6s; }
.fade-line:nth-child(2) .fade-word:nth-child(2) { animation-delay: 7s; }
.fade-line:nth-child(2) .fade-word:nth-child(3) { animation-delay: 8s; }
/* …依此类推，确保单词逐个浮现 */

✅ JavaScript（保持不变，仅负责 DOM 结构化）

window.addEventListener('load', function() {
  const fadeLineDivs = document.querySelectorAll('.fade-line');
  fadeLineDivs.forEach(fadeLineDiv => {
    const words = fadeLineDiv.textContent.trim().split(/\s+/);
    fadeLineDiv.innerHTML = '';
    words.forEach((word, i) => {
      const span = document.createElement('span');
      span.textContent = word + (i === words.length - 1 ? '' : ' ');
      span.classList.add('fade-word');
      fadeLineDiv.appendChild(span);
    });
  });
});

✅ HTML 结构（简洁清晰）

<div id="text-container">
  <p class="fade-line">First line of text</p>
  <p class="fade-line">Second line of text</p>
  <p class="fade-line">Third line of text</p>
</div>

⚠️ 注意事项与最佳实践

避免重复定义 keyframes：原方案为每个单词单独写 fadeWord1~fadeWord6，既难维护又易出错。统一使用 fadeWord 并配合 animation-delay 控制节奏更健壮。
停留时间 = 总周期 × 停留占比：本例中 51%–75% 覆盖 24% 的时间轴，对应 12s × 0.24 ≈ 2.88s；若需严格 5s 停留，建议将总周期设为 20s，并设 50%–75% 为停留区间（即 0%→25% 入场、25%→75% 停留、75%→100% 退场）。
forwards 是关键：确保动画结束时保留最终样式（opacity: 0），避免闪烁或回退。
性能提示：对大量文本，建议添加 will-change: opacity 或改用 transform: translateZ(0) 触发硬件加速。

通过此方案，你将获得真正“先逐字浮现 → 完整显示并静止5秒 → 再逐字淡出 → 下一句启动”的流畅轮播体验，告别“黑屏等待”的割裂感。