页面加载器数字滚动动画实现问题求助（CSS/GSAP）

核心问题根源 #

所有<span>元素默认堆叠在一起，动画起始位置并非容器可见区域的正下方，导致后续数字被前面的元素遮挡，动画执行到第二个数字后就无法继续显示后续内容。

已验证的CSS修复方案 #

要让每个数字从容器可见区域正下方开始移动，需调整元素定位：

1. 给数字容器设置相对定位和溢出隐藏，作为子元素的定位基准：

.counter__number, .counter__number-second {
  position: relative;
  overflow: hidden;
  height: 1.5em; /* 设为单个数字的高度，确保只显示一个数字 */
}

2. 让每个数字span初始定位在容器底部外侧：

.counter__number span, .counter__number-second span {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
}

需求与预期动画流程 #

目标是实现加载页数字滚动效果：

• 数字初始隐藏在容器底部，通过overflow: hidden不可见
• 动画步骤：从底部上移至可见位置（y:0）→ 停留约1秒 → 继续上移至顶部消失（y:-100%）
• 最终显示名字首字母「M」「L」，并支持差异化动画（比如特定数字停留更久）

之前的尝试与问题 #

• GSAP方案：仅实现了.counter__number的counterAnimation，loaderTextAnimation正常，但数字动画在第二个数字显示后停止，最终仅「2」可见，其余数字要么在上方隐藏要么在下方未移动
• CSS关键帧方案：定义roll动画并给每个span加延迟，同样在第二组数字显示后终止，后续数字无动画

额外提示（GSAP优化） #

如果用GSAP实现差异化停留，可给目标数字的时间线添加更长的延迟或暂停：

// 示例：给.counter__number-second里的「5」增加停留时间
gsap.timeline()
  .to(targetSpan, {y: 0, duration: 0.5})
  .to(targetSpan, {delay: 2}) // 比其他数字多停留1秒
  .to(targetSpan, {y: -100%, duration: 0.5});

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