前端实现跑马线动画时出现偶发抖动是什么原因？

三种完全不同的实现都出现同类抖动，基本可以排除代码逻辑层面的问题，核心诱因基本集中在浏览器渲染、GPU硬件限制层面，全屏下因为视口更大、渲染像素更多，抖动感知会更明显，常见原因和对应修复方案如下：

• 亚像素渲染偏差
  你当前的动画参数换算下来60fps下单帧移动距离约为10.4px，非整数像素偏移会触发浏览器的亚像素抗锯齿计算，高饱和色块相邻时，不同位置的抗锯齿采样结果不一致就会产生视觉抖动。
  修复：调整动画总位移或时长，让单帧位移尽量为整像素；给动画容器添加will-change: transform、transform: translateZ(0)强制提升为独立合成层，减少主线程渲染干扰。
• GPU单纹理尺寸超限
  消费级设备GPU对单张合成纹理的普遍尺寸上限为4096px/8192px，你当前示例里的滚动容器总宽度超过12000px，浏览器会自动将超宽元素拆分为多块纹理上传GPU，滚动过程中纹理块的边界采样、拼接调度就会出现不定期跳变。
  修复：不要使用超长总位移的动画逻辑，改用标准无缝跑马灯方案：仅复制1份原始内容拼接在尾部，动画仅平移1份原始内容的宽度就回到初始位置，首尾内容完全一致所以视觉上无跳变，总宽度控制在2000px左右，远低于GPU纹理限制。
• 布局计算开销过高
  你当前使用grid-auto-flow: column实现横向排列，滚动过程中浏览器会持续在主线程校验网格轨道尺寸，一旦主线程有其他任务占用，就会出现短暂的位置偏移卡顿。
  修复：将布局改为display: flex，给子元素添加flex-shrink: 0禁止压缩，静态flex布局的计算开销远低于grid，动画过程中不会触发额外的布局重算。
• 动画参数配置缺失
  你当前的Web Animations API代码没有显式指定easing: linear，部分浏览器版本下会默认使用缓动函数，导致动画速度不均匀；同时容器设置了width: 100%，会触发不必要的超宽区域渲染。
  修复：所有跑马灯类匀速动画必须显式指定线性缓动；容器宽度改为fit-content，仅渲染实际内容需要的宽度；添加backface-visibility: hidden减少合成层渲染计算量。

修复后可直接运行的核心代码 #

const block = document.getElementById("block")
// 单组内容总宽度（元素宽度和+间隙）
const singleGroupWidth = 500 + 150 +74 +223 +800 + 4*10;
block.animate(
  [
    { transform: 'translate3d(0, 0, 0)' },
    { transform: `translate3d(-${singleGroupWidth}px, 0, 0)` }
  ],
  {
    duration: Math.round(singleGroupWidth / 10 * 16.67), // 保持每帧移动10px整，和原动画视觉速度一致
    iterations: Infinity,
    easing: 'linear'
  }
);

#block {
  height: 50px;
  position: relative;
  display: flex;
  gap: 10px;
  width: fit-content;
  will-change: transform;
  backface-visibility: hidden;
}
.elem {
  height: 50px;
  flex-shrink: 0;
}
.a1 {
  min-width: 500px;
  background: red;
}
.a2 {
  min-width: 150px;
  background: black;
}
.a3 {
  min-width: 74px;
  background: blue;
}
.a4 {
  min-width: 223px;
  background: purple;
}
.a5 {
  min-width: 800px;
  background: yellow;
}

<div id="block">
  <div class="elem a1"></div>
  <div class="elem a2"></div>
  <div class="elem a3"></div>
  <div class="elem a4"></div>
  <div class="elem a5"></div>
  <!-- 仅需复制1组内容做无缝衔接即可 -->
  <div class="elem a1"></div>
  <div class="elem a2"></div>
  <div class="elem a3"></div>
  <div class="elem a4"></div>
  <div class="elem a5"></div>
</div>

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