如何让 CSS 动画在完成时暂停而非延迟下一阶段-html教程-PHP中文网

如何让 CSS 动画在完成时暂停而非延迟下一阶段

本文详解如何通过调整关键帧时间分布与 animation-delay 的配合，实现文字逐词入场后静止停留 5 秒再淡出的“暂停式”动画效果，避免传统 delay 导致的空白等待。

本文详解如何通过调整关键帧时间分布与 animation-delay 的配合，实现文字逐词入场后静止停留 5 秒再淡出的“暂停式”动画效果，避免传统 delay 导致的空白等待。

要实现“文字逐词入场 → 完全显示后静止 5 秒 → 淡出 → 下一句开始”的效果，核心在于将“停留”转化为关键帧中的静态区间（即高 opacity 的平台期），而非依赖 animation-delay 造成的空档。CSS 动画本身不支持运行时“暂停”，但可通过精确控制 @keyframes 中的停留时段（如 51%–75% 保持 opacity: 1），结合合理的时间轴规划，模拟出自然的暂停感。

✅ 正确的关键帧设计（以 12s 总时长为例）

为确保每句完整显示 5 秒，需重新分配动画阶段：

入场：0%–25%（3s）→ opacity 从 0→1
停留：26%–75%（6s，含 5s 可见+1s 缓冲）→ opacity 保持 1
退场：76%–100%（3s）→ opacity 从 1→0

@keyframes fadeWord {
  0%, 25%   { opacity: 0; }
  26%, 75%  { opacity: 1; } /* 关键：延长高亮区间 */
  76%, 100% { opacity: 0; }
}

同理，整行 .fade-line 的 fadeLine 动画也应采用相同节奏，确保容器与子词同步。

✅ 精准的 animation-delay 配置逻辑

假设单句动画总时长为 12s，其中：

入场耗时 ≈ 3s
停留耗时 = 5s（目标）
退场耗时 ≈ 3s
→ 单句完整周期 = 11s（预留 1s 缓冲防抖）

那么第二句应在第一句退场结束时启动，即 delay = 12s（严格匹配总动画时长）。若需多句轮播，可统一设置：

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

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

下载

.fade-line:nth-child(2) { animation-delay: 12s; }
.fade-line:nth-child(3) { animation-delay: 24s; }
.fade-line:nth-child(4) { animation-delay: 36s; }

同时，各词的 animation-delay 需按词序递增（如第 1 词 0s、第 2 词 0.5s…），但必须全部基于同一父容器的动画起点计算，而非各自独立延迟：

/* 所有 .fade-word 共享同一动画名，仅通过 delay 错开 */
.fade-word {
  animation: fadeWord 12s ease-in-out forwards infinite;
}
.fade-word:nth-child(1) { animation-delay: 0s; }
.fade-word:nth-child(2) { animation-delay: 0.5s; }
.fade-word:nth-child(3) { animation-delay: 1s; }
/* ...依此类推 */

⚠️ 注意：原代码中为每个词单独定义 fadeWord1–fadeWord6 动画，不仅冗余，且难以维护。统一动画名 + nth-child 延迟是更健壮的方案。

✅ JavaScript 保持简洁可靠

DOM 初始化逻辑无需改动，但建议增强容错性：

window.addEventListener('load', () => {
  document.querySelectorAll('.fade-line').forEach(line => {
    const words = line.textContent.trim().split(/\s+/);
    line.innerHTML = words.map(word => 
      `<span class="fade-word">${word}</span>`
    ).join(' ');
  });
});