本文详解如何通过调整 CSS 关键帧时序与 animation-delay 策略，替代单纯依赖 animation-delay 的粗粒度控制，实现文本动画的精准暂停（即“保持可见状态5秒”），而非生硬等待后再触发下一轮动画。
本文详解如何通过调整 css 关键帧时序与 `animation-delay` 策略，替代单纯依赖 `animation-delay` 的粗粒度控制，实现文本动画的精准暂停（即“保持可见状态5秒”），而非生硬等待后再触发下一轮动画。
在 CSS 动画中，“暂停”并非指停止播放（如 animation-play-state: paused），而是指让元素在某一视觉状态（如完全不透明）上持续停留一段时间——这需通过关键帧（@keyframes）的时间比例设计来实现，而非仅靠 animation-delay 延迟整个动画启动。
核心思路是：将单次完整动画周期（例如 12s）合理划分为三阶段：
- 入场阶段（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秒 → 再逐字淡出 → 下一句启动”的流畅轮播体验，告别“黑屏等待”的割裂感。
立即学习“前端免费学习笔记（深入）”；
