如何实现CSS文本动画暂停而非使用延迟效果？

问题核心是原来的动画时间轴没把「停留5秒」整合到动画周期里，反而用animation-delay让第二句晚启动，导致首句消失后出现空白期。我们需要调整动画关键帧，把停留时间嵌入每个元素的动画中，再让两句动画无缝衔接。

修改后的CSS代码 #

/* 控制整个段落的显示/淡出，和单词动画同步 */
@keyframes fadeLine {
    0%, 10% { opacity: 0; } /* 前1秒等待第一个单词出现 */
    10%, 90% { opacity: 1; } /* 1-9秒保持显示，包含5秒停留阶段 */
    90%, 100% { opacity: 0; } /* 最后1秒统一淡出 */
}

/* 每个单词的逐词显示+停留+淡出动画 */
@keyframes fadeWord1 {
    0%, 10% { opacity: 0; }
    10%, 90% { opacity: 1; }
    90%, 100% { opacity: 0; }
}
@keyframes fadeWord2 {
    0%, 20% { opacity: 0; }
    20%, 90% { opacity: 1; }
    90%, 100% { opacity: 0; }
}
@keyframes fadeWord3 {
    0%, 30% { opacity: 0; }
    30%, 90% { opacity: 1; }
    90%, 100% { opacity: 0; }
}
@keyframes fadeWord4 {
    0%, 40% { opacity: 0; }
    40%, 90% { opacity: 1; }
    90%, 100% { opacity: 0; }
}
@keyframes fadeWord5 {
    0%, 50% { opacity: 0; }
    50%, 90% { opacity: 1; }
    90%, 100% { opacity: 0; }
}
@keyframes fadeWord6 {
    0%, 60% { opacity: 0; }
    60%, 90% { opacity: 1; }
    90%, 100% { opacity: 0; }
}

.fade-line {
    position: absolute;
    opacity: 0;
    animation: fadeLine 10s ease-in-out forwards;
    animation-iteration-count: infinite;
}
/* 第二句延迟等于第一句的动画时长，确保第一句淡出后立即启动 */
.fade-line:nth-child(2),
.fade-line:nth-child(2) .fade-word {
    animation-delay: 10s;
}

.fade-word {
    opacity: 0;
    animation: fadeWord6 10s ease-in-out forwards;
    animation-iteration-count: infinite;
}
.fade-word:nth-child(1) { animation-name: fadeWord1; }
.fade-word:nth-child(2) { animation-name: fadeWord2; }
.fade-word:nth-child(3) { animation-name: fadeWord3; }
.fade-word:nth-child(4) { animation-name: fadeWord4; }
.fade-word:nth-child(5) { animation-name: fadeWord5; }

修改说明 #

• 动画时长拆分：把总时长设为10秒，拆分出：1-6秒逐词显示（按单词数量依次延迟出现）、3秒过渡+5秒停留（到第9秒）、1秒统一淡出
• 关键帧重构：让所有单词在显示阶段保持到第9秒，确保全部显示后稳定停留5秒再同步淡出
• 衔接逻辑优化：第二句的延迟等于第一句的动画总时长，避免空白期，实现两句动画无缝切换

HTML和JavaScript代码无需修改，直接使用原代码即可。

内容的提问来源于stack exchange，提问作者DigitalDesigner