如何用CSS和React实现流畅的无限交替文本过渡效果？

你的核心问题在于两个动画时长不匹配（主元素6s，伪元素50s），且文本切换是瞬间硬切换，没有和淡入淡出同步，导致效果脱节。以下是修正方案：

核心调整思路 #

1. 把文本内容切换和透明度动画整合到同一个关键帧中，确保完全同步
2. 给每个文本分配完整的「淡入→停留→淡出」周期，在透明度为0的阶段切换文本内容，避免突兀感
3. 统一总时长，让所有文本的生命周期均匀分配

修正后的代码 #

#hello:after {
  content: '';
  animation: textCycle 20s linear infinite;
  /* 确保伪元素继承主元素的字体样式，避免布局偏移 */
  font: inherit;
}

@keyframes textCycle {
  /* 第一个文本：1s淡入 → 2s停留 → 1s淡出 */
  0%    { content: 'This is the first text'; opacity: 0; }
  5%    { opacity: 1; }
  15%   { opacity: 1; }
  20%   { opacity: 0; }

  /* 第二个文本 */
  20%   { content: 'The second text'; opacity: 0; }
  25%   { opacity: 1; }
  35%   { opacity: 1; }
  40%   { opacity: 0; }

  /* 第三个文本 */
  40%   { content: 'Other text'; opacity: 0; }
  45%   { opacity: 1; }
  55%   { opacity: 1; }
  60%   { opacity: 0; }

  /* 第四个文本 */
  60%   { content: 'Another example text'; opacity: 0; }
  65%   { opacity: 1; }
  75%   { opacity: 1; }
  80%   { opacity: 0; }

  /* 第五个文本 */
  80%   { content: 'This is the last text'; opacity: 0; }
  85%   { opacity: 1; }
  95%   { opacity: 1; }
  100%  { opacity: 0; }
}

代码说明 #

• 总时长设为20s，5个文本各占4s（20%总时长），每个文本的周期分配：
  • 0%-5%：淡入（1s）
  • 5%-15%：完全显示（2s）
  • 15%-20%：淡出（1s）
• 文本内容在透明度为0的节点（如20%、40%位置）切换，此时用户看不到文本，不会出现硬切换的怪异感
• 去掉了原有的分离动画，把所有逻辑整合到textCycle关键帧中，彻底解决不同步问题

自定义调整技巧 #

• 如果想加快/减慢整体速度，直接修改animation的时长即可（比如改成10s，每个文本周期变为2s）
• 调整停留时间：比如把5%-15%改成5%-18%，停留时长就从2s变为2.6s
• 调整淡入淡出速度：比如把0%-5%改成0%-3%，淡入时间就从1s变为0.6s

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