本文详解如何通过调整关键帧时间分布与 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（严格匹配总动画时长）。若需多句轮播，可统一设置：
.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(' ');
});
});✅ 最终效果验证要点
- 每句文字应逐词淡入（约 3s），完全显示后持续可见 5s，再用 3s 淡出；
- 句与句之间无缝衔接（无黑屏/空白间隙）；
- 使用 animation-fill-mode: forwards 确保动画结束后保持最终状态（opacity: 0）；
- 若需暂停/播放控制，后续可结合 animation-play-state: paused/running 动态切换（本文聚焦自动循环场景）。
通过将“停留”内化为关键帧的一部分，而非外部延迟，动画节奏更可控、语义更清晰，也更符合 CSS 动画的设计哲学。
