React文字滚动动画循环时随机闪烁问题排查与解决求助

闪烁诱因 #

• 动画循环的不连续跳变：当前动画在100%关键帧时直接从translateY(-500%)跳转到初始的translateY(0)，无过渡过程。浏览器处理这种瞬间位置变化时，容易出现帧丢失或重绘断层，表现为闪烁。
• 悬停触发的渲染管线变化：即使没有设置hover样式，鼠标悬停时浏览器可能触发元素的GPU加速切换（从软件渲染切到硬件渲染），这种切换会放大动画衔接处的不流畅，让闪烁更明显。
• 冗余重复元素的干扰：数组末尾添加的word1本意是衔接循环，但动画跳变的核心问题没解决，反而可能让渲染引擎在计算元素位置时出现额外冲突。

修复方案 #

方案1：优化关键帧实现无缝循环 #

修改CSS动画，让动画结束时的状态和开始时视觉一致，避免跳变：

.container-rollingText {
  overflow-y: hidden;
  height: 140px;
  width: fit-content;
  /* 告诉浏览器提前优化该元素的渲染 */
  will-change: transform;
}

.singleWord {
  font-size: 65px;
  /* 使用linear时序函数，保证动画速度均匀 */
  animation: roll-up 8s infinite linear;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 避免GPU渲染时的翻转闪烁 */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

@keyframes roll-up {
  0%, 20% {
    transform: translateY(0);
  }
  20.01%, 40% {
    transform: translateY(-100%);
  }
  40.01%, 60% {
    transform: translateY(-200%);
  }
  60.01%, 80% {
    transform: translateY(-300%);
  }
  80.01%, 99.99% {
    transform: translateY(-400%);
  }
  100% {
    transform: translateY(0);
  }
}

同时修改React代码，去掉数组末尾重复的word1：

function App() {
  const words = ['word1', 'word2', 'word3', 'word4', 'word5'];

  return (
    <div className="container-container">
      优化后动画循环不再闪烁
      <div className="container-rollingText">
        {words.map((word) => {
          return <div className="singleWord"> {word} </div>;
        })}
      </div>
    </div>
  );
}
ReactDOM.render( <App />, document.getElementById("root"));

方案2：容器滚动式无缝动画 #

把所有单词放在统一容器内，通过容器的translate实现滚动，避免单个元素的动画冲突：

.container-rollingText {
  overflow-y: hidden;
  height: 140px;
  width: fit-content;
  will-change: transform;
}

.wordWrapper {
  animation: roll-up 8s infinite linear;
}

.singleWord {
  font-size: 65px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

@keyframes roll-up {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-500%);
  }
}

React代码调整：

function App() {
  const words = ['word1', 'word2', 'word3', 'word4', 'word5', 'word1'];

  return (
    <div className="container-container">
      容器滚动式无缝动画
      <div className="container-rollingText">
        <div className="wordWrapper">
          {words.map((word) => {
            return <div className="singleWord"> {word} </div>;
          })}
        </div>
      </div>
    </div>
  );
}
ReactDOM.render( <App />, document.getElementById("root"));

该方案通过外层容器滚动，让最后一个word1和第一个元素自然衔接，动画循环时无跳变。

额外优化建议 #

• 避免使用fit-content作为容器宽度，固定宽度或使用min-content，减少浏览器重排概率。
• 确保动画元素的父容器没有触发重排的动态样式，比如动态宽高、margin变化等。

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