垂直文字滑动动画实现问题：仿lvng.io效果卡顿且不同步

问题根源 #

你的动画出现重叠、不同步的原因主要有两点：

1. 文字元素垂直堆叠而非重叠占位，导致切换时位置混乱
2. 关键帧时间轴设计不合理，导致多个文字同时处于可见状态

修正后的完整代码 #

.animation-container {
  display: flex;
  align-items: center;
  height: 1.5em; /* 与文字高度匹配 */
  font-size: 1.2em;
  overflow: hidden;
}

.base-text {
  white-space: nowrap;
}

.spans-container {
  margin-left: 5px;
  position: relative;
  height: 100%; /* 继承容器高度 */
}

.word {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  opacity: 0;
  animation: fadeInOut 9s linear infinite;
}

.word:nth-child(2) { animation-delay: 3s; }
.word:nth-child(3) { animation-delay: 6s; }

@keyframes fadeInOut {
  0% {
    opacity: 0;
    transform: translateY(100%); /* 初始在容器下方 */
  }
  11.11% { /* 第1秒结束时完全显示 */
    opacity: 1;
    transform: translateY(0);
  }
  22.22% { /* 保持显示到第2秒 */
    opacity: 1;
    transform: translateY(0);
  }
  33.33% { /* 第3秒结束时完全隐藏 */
    opacity: 0;
    transform: translateY(-100%); /* 移出容器上方 */
  }
  99.99% { /* 动画周期内保持隐藏状态 */
    opacity: 0;
    transform: translateY(-100%);
  }
  100% {
    opacity: 0;
    transform: translateY(100%); /* 重置到初始位置准备下一轮 */
  }
}

<div class="animation-container">
  <span class="base-text">The future of home</span>
  <div class="spans-container">
    <span class="word"> living</span>
    <span class="word"> owning</span>
    <span class="word"> renting</span>
  </div>
</div>

核心修复点 #

• 重叠占位: 将.spans-container设为相对定位，.word设为绝对定位（top/left 0），让所有文字共享同一位置，实现无缝替换
• 精准时间轴: 把9秒动画周期拆分为3个3秒片段，每个文字仅在自己的3秒窗口内显示：
  • 0-1秒：从下方淡入
  • 1-2秒：保持可见
  • 2-3秒：向上淡出
• 同步延迟: 3秒/6秒的延迟与动画片段完美对齐，确保前一个文字淡出时后一个刚好淡入

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