交错文本显示动画（Stagger Text Reveal Animation）的工作原理是什么？

你完全不需要手动创建100个p标签、分配100个独立ID，也不需要逐个修改上百个元素的动画延迟参数，用下面的方法几行代码就能实现需求：

优化核心逻辑 #

• 所有动画元素共用同一个类名，不需要分配唯一ID
• 动画延迟按元素序号规律计算，要调整整体交错间隔只需要修改一个系数即可
• 不需要手动拆分每个字母到独立标签，用一行JS即可自动生成

方案1：原生CSS + 少量JS（推荐，无需预处理器） #

步骤1：HTML结构 #

只需要一个父容器放原始文本即可：

<div class="text-wrapper">这里是你要做交错动画的100个字母内容</div>

步骤2：JS自动拆分字符为独立标签 #

运行这段代码会自动把每个字母包装到独立的<span>标签中，同时带上序号自定义属性：

const textContainer = document.querySelector('.text-wrapper');
textContainer.innerHTML = textContainer.textContent.split('').map((char, index) => {
  return `<span class="anim-char" style="--char-index: ${index}">${char}</span>`
}).join('');

步骤3：CSS动画实现 #

用CSS的calc()函数直接计算每个元素的动画延迟，只需要写一次规则即可适配所有元素：

.anim-char {
  /* 基础动画参数 */
  animation: fadeInUp 0.6s ease forwards;
  opacity: 0;
  /* 自动按序号计算延迟，要调整交错间隔只需要修改0.1这个系数即可 */
  animation-delay: calc(var(--char-index) * 0.1s);
}

/* 自定义动画效果，可根据需求修改 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

方案2：预处理器批量生成规则（无需JS） #

如果你用Sass/LESS等CSS预处理器，连JS都不需要，直接用循环生成所有延迟规则：

// 假设你已经手动把所有字母放到class为anim-char的span标签中
.anim-char {
  animation: fadeInUp 0.6s ease forwards;
  opacity: 0;
}

// 100个元素只需要写这一段循环即可生成所有延迟规则
@for $i from 1 through 100 {
  .anim-char:nth-child(#{$i}) {
    animation-delay: #{$i * 0.1}s;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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