本文介绍一种基于 CSS @keyframes 和 transform 的纯 CSS 方案，替代 jQuery 动画实现平滑、无跳动的无限左移跑马灯，并支持悬停暂停，彻底规避 DOM 操作和定时器导致的渲染卡顿。
本文介绍一种基于 css `@keyframes` 和 `transform` 的纯 css 方案，替代 jquery 动画实现平滑、无跳动的无限左移跑马灯，并支持悬停暂停，彻底规避 dom 操作和定时器导致的渲染卡顿。
传统的 JavaScript + margin-left 动画方案（如使用 setInterval 配合 .animate()）存在天然缺陷：每次动画结束需重置 marginLeft 并手动移动 DOM 节点（如 after(first)），这会触发浏览器强制重排（reflow）与重绘（repaint），造成视觉“跳帧”；同时，jQuery 的 animate() 依赖 layout thrashing，在高频率更新下极易失帧。
推荐解法：纯 CSS 驱动的硬件加速滚动
核心思路是——用 transform: translateX() 替代 margin-left，用 @keyframes 定义无缝循环动画，并通过元素复制实现视觉上的无限滚动。该方案完全交由浏览器合成层（Compositor）处理，不触发重排，性能更优、过渡更顺滑。
✅ 正确实现步骤
-
结构上复制内容块：将原始
<li class="marqueme">完整重复一次（即 6 个 → 12 个），确保动画末尾能自然衔接开头； -
CSS 中启用
transform动画：使用translateX(-50%)将整个容器向左平移自身宽度的一半，配合0%和100%关键帧形成无缝循环； -
利用
animation-play-state控制暂停：:hover时设为paused，无需 JS 干预，响应更快、更可靠。
以下是精简可复用的核心代码：
.marquestarthere {
display: flex;
gap: 56px 31px;
animation: 8s marquee linear infinite;
/* 关键：启用 will-change 提升至合成层（可选但推荐） */
will-change: transform;
}
.marquestarthere:hover {
animation-play-state: paused;
}
@keyframes marquee {
0%, 100% {
transform: translateX(0);
}
99.999% {
transform: translateX(-50%);
}
}
? 为什么是
-50%？
因为复制后总宽度 ≈ 原始内容宽度 × 2。平移-50%即移动半个“双倍容器”，恰好让第二组内容无缝接替第一组，视觉上形成无限循环。此值比固定像素更健壮，适配不同屏幕与缩放。
⚠️ 注意事项与优化建议
-
避免
width: max-content与flex-wrap: nowrap冲突：.testimonial-cards应移除width: max-content（它会限制容器收缩），改用display: flex+flex-wrap: nowrap配合gap即可保证单行布局； -
确保子项尺寸可控：
.marqueme使用flex: 0 0 auto是合理的，但需确认其实际宽度稳定（例如卡片max-width: 500px已足够）； -
性能增强项：
- 添加
will-change: transform显式提示浏览器提前启用 GPU 加速； - 如需更高兼容性，可补充
-webkit-animation前缀（现代项目通常无需）；
- 添加
-
无障碍友好：可为
.marqueslide添加aria-live="off"和aria-label="自动滚动的用户评价"，并在暂停时动态更新（若需深度可访问性支持）。
✅ 最终效果优势总结
| 维度 | jQuery 方案 | 纯 CSS 方案 |
|---|---|---|
| 流畅度 | ❌ 易跳帧、有重排抖动 | ✅ 硬件加速、60fps 稳定滚动 |
| 代码复杂度 | ❌ 需维护定时器、事件监听、DOM 操作 | ✅ 零 JS，仅 10 行 CSS 即可完成 |
| 悬停响应 | ❌ 依赖 clearInterval 有时延迟 |
✅ 原生伪类，毫秒级响应 |
| 可维护性 | ❌ 修改速度/间距需同步改 JS/CSS | ✅ 全部集中于 CSS，一改即生效 |
告别“跳跃”，拥抱丝滑——用现代 CSS 实现真正专业的无限跑马灯，既是性能升级，也是开发体验的跃迁。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
