如何使用 CSS 关键帧实现平滑的文本淡入淡出动画-js教程-PHP中文网

如何使用 CSS 关键帧实现平滑的文本淡入淡出动画

本文介绍一种基于纯 css 关键帧与 javascript 初始化结合的稳定方案，替代 jquery 链式动画和 settimeout 递归调用，彻底解决多轮播放后动画卡顿、顺序错乱的问题。

本文介绍一种基于纯 css 关键帧与 javascript 初始化结合的稳定方案，替代 jquery 链式动画和 settimeout 递归调用，彻底解决多轮播放后动画卡顿、顺序错乱的问题。

传统 jQuery 方案（如 fadeIn() + setTimeout 递归）在频繁 DOM 操作和动画队列叠加时极易引发状态混乱：动画未完成即触发下一轮、.empty() 强制清空导致过渡中断、setTimeout 累计误差放大，最终表现为文字闪烁不同步、淡入延迟不一致、甚至 DOM 元素残留。

推荐方案：CSS 关键帧驱动 + 语义化 DOM 初始化

核心思想是将动画控制权交还给浏览器渲染引擎——利用 @keyframes 精确调度每段文本的显隐时机，避免 JS 主线程阻塞；通过一次性结构化生成带 class 的单词容器，并赋予差异化 animation-delay，实现逐字错峰淡入，整体段落循环播放。

✅ 关键优化点：

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

✨ 零 JS 动画逻辑：所有淡入/淡出由 CSS animation 控制，性能更高、更可靠；
? 结构预处理：JS 仅在页面加载时遍历 .fade-line，将原文本按空格拆解为带 fade-word 类的，不参与运行时动画；
⏱️ 精准时间轴：主容器 .fade-line 使用 12s 总周期，其中 0%–25% 隐藏 → 26%–50% 显示 → 53%–100% 隐藏；每个单词通过 nth-child(n) 绑定专属 @keyframes（如 fadeWord1～fadeWord6），延迟依次递增（+3% 起始偏移），形成自然逐字浮现效果；
? 无限循环无副作用：animation-iteration-count: infinite 配合 forwards 保留在最后一帧状态，无需手动重置或清空 DOM。

? 示例代码（精简可复用版）：

<div id="text-container">
  <p class="fade-line">Hello world this is smooth</p>
  <p class="fade-line">Another line fades perfectly</p>
</div>

// 仅执行一次：将每行文本拆分为带动画类的 span
document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('.fade-line').forEach(el => {
    const words = el.textContent.trim().split(/\s+/);
    el.innerHTML = '';
    words.forEach(word => {
      const span = document.createElement('span');
      span.textContent = word + ' ';
      span.classList.add('fade-word');
      el.appendChild(span);
    });
  });
});

@keyframes fadeLine {
  0%, 25% { opacity: 0; }
  26%, 50% { opacity: 1; }
  53%, 100% { opacity: 0; }
}

/* 为前6个单词定义错峰动画（可根据实际长度扩展） */
@keyframes fadeWord1 { 0%, 25% { opacity: 0; } 29%, 50% { opacity: 1; } 53%, 100% { opacity: 0; } }
@keyframes fadeWord2 { 0%, 29% { opacity: 0; } 32%, 50% { opacity: 1; } 53%, 100% { opacity: 0; } }
@keyframes fadeWord3 { 0%, 32% { opacity: 0; } 35%, 50% { opacity: 1; } 53%, 100% { opacity: 0; } }
@keyframes fadeWord4 { 0%, 35% { opacity: 0; } 38%, 50% { opacity: 1; } 53%, 100% { opacity: 0; } }
@keyframes fadeWord5 { 0%, 38% { opacity: 0; } 41%, 50% { opacity: 1; } 53%, 100% { opacity: 0; } }
@keyframes fadeWord6 { 0%, 41% { opacity: 0; } 44%, 50% { opacity: 1; } 53%, 100% { opacity: 0; } }

.fade-line {
  position: relative;
  opacity: 0;
  animation: fadeLine 12s ease-in-out infinite;
}
.fade-line:nth-child(2) { animation-delay: 6s; } /* 第二段延迟半周期 */

.fade-word {
  opacity: 0;
  animation: fadeWord6 12s ease-in-out 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; }
.fade-word:nth-child(6) { animation-name: fadeWord6; }

⚠️ 注意事项：

若单行单词数 > 6，需补充对应 @keyframes fadeWord7 等规则，并在 CSS 中扩展 nth-child(n) 选择器；
所有动画时间单位（如 12s）必须统一，且 fadeLine 周期应 ≥ 最长单词动画周期，确保段落切换节奏可控；
避免在 .fade-line 上设置 display: none 或 visibility: hidden，会中断动画流程，应始终用 opacity 控制显隐；
如需响应式适配，建议将 12s 替换为 CSS 自定义属性（如 --anim-duration: 12s），便于全局调整。