Marquee动画每5秒卡顿抖动，如何优化实现持续流畅滚动？

核心思路：用CSS硬件加速动画替代JS控制，优化循环衔接逻辑 #

抖动的主要原因通常是JS定时器精度不足、动画触发重排重绘，或者循环结束时的衔接断层。以下是具体修改方案：

1. 替换JS动画为CSS @keyframes 实现 #

CSS动画由浏览器合成线程独立处理，不受主线程任务干扰，能大幅提升流畅度，同时保证文本立即加载（直接写在HTML中）。

示例代码 #

HTML（文本直接写入，确保立即加载）

<div class="marquee-bar">
  <div class="marquee-text">
    这里是需要滚动的顶部栏文本，无需JS动态插入，页面加载即显示
  </div>
</div>

CSS（使用transform实现硬件加速）

.marquee-bar {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  padding: 8px 0;
  background: #eee;
  /* 强制开启硬件加速，避免Chrome渲染节流 */
  will-change: transform;
  transform: translateZ(0);
}

.marquee-text {
  display: inline-block;
  /* 使用linear时间函数保持匀速，避免速度变化导致的抖动 */
  animation: scroll-marquee 18s linear infinite;
}

@keyframes scroll-marquee {
  0% {
    /* 从容器右侧进入 */
    transform: translateX(100%);
  }
  100% {
    /* 完全滚动出容器左侧 */
    transform: translateX(-100%);
  }
}

2. 修复循环衔接的无缝性（解决末尾跳回开头的抖动） #

如果文本长度较短，动画结束时会出现"跳回"的抖动，可通过复制文本实现无缝循环：

修改后的HTML #

<div class="marquee-bar">
  <div class="marquee-text">
    <span>顶部栏滚动文本内容</span>
    <span>顶部栏滚动文本内容</span>
  </div>
</div>

保持原有@keyframes逻辑即可，两个相同文本会连续滚动，视觉上完全无缝，避免循环切换时的抖动。

3. 移除原JS动画逻辑 #

如果之前使用setInterval或requestAnimationFrame控制滚动位置，完全删除这部分代码——JS定时器受主线程任务（如页面渲染、脚本执行）影响，会出现周期性的精度偏差，这就是你看到每5秒抖动的原因。

4. 额外优化细节 #

• 避免给marquee-text设置position: relative + left/right属性，这类属性会触发重排，远不如transform高效。
• 不要给滚动文本添加复杂的嵌套结构，减少渲染树的计算量。
• 测试时关闭Chrome的开发者工具（DevTools开启时会降低渲染性能，可能干扰测试结果）。

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