如何实现流畅无缝的 Marquee 滚动动画

心靈之曲 2025-12-31 00:00:00 次阅读

本文详解 jquery + css 实现平滑无限滚动 marquee 的关键优化：通过消除 `inline-block` 元素间的隐式空白间隙（由换行/空格导致的 4px 左右间隙），配合 `font-size: 0` 重置技巧，彻底解决每轮动画结束时的“卡顿”或“抖动”问题。

你遇到的“每 5 秒动画抖动”现象，并非 requestAnimationFrame 或 animate() 性能问题，而是典型的 CSS 渲染层瑕疵：当

使用 display: inline-block 时，HTML 源码中

标签之间的换行符与空格会被浏览器渲染为一个不可见但占据空间的字符间隙（约 4px），导致每次循环重排元素时，marginLeft 计算值与实际布局存在像素级偏差，视觉上表现为瞬间跳变或“卡顿”。

✅ 正确解法是从根源消除该间隙，而非调整动画逻辑。推荐采用业界通用且兼容性极佳的 font-size: 0 方案：

.slideContainer {
  font-size: 0; /* 关键：清除 inline-block 间隙 */
  width: 1000%; /* 保持原有布局逻辑 */
  margin: 0;
  padding: 0;
}

.slideContainer li {
  display: inline-block;
  font-size: 16px; /* 恢复文本正常大小 */
  list-style: none;
  margin: 0;
  padding: 0;
}

⚠️ 注意事项：

不要使用 float: left 或 flexbox 替代（虽可行，但会破坏原动画依赖的 marginLeft 位移逻辑，需重写 JS）；
避免在
确保所有
内联样式无额外 margin/padding，文本内容无需包裹空格（如 NEW + 中的可精简，仅保留语义所需空格）；
动画容器 .slider 建议添加 will-change: transform（现代浏览器）或 transform: translateZ(0)（兼容旧版）触发硬件加速，进一步提升渲染帧率。

? 补充建议（进阶优化）：
若追求极致性能与现代标准，可考虑用纯 CSS @keyframes 替代 jQuery animate()，完全交由合成器线程处理：

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); } /* 滚动一屏宽度 */
}
.slideContainer {
  animation: marquee 10s linear infinite;
}