本文介绍一种基于 CSS @keyframes 和 animation-play-state 的纯 CSS 解决方案，替代 jQuery 动画逻辑，彻底消除因 DOM 操作、定时器与 margin 动画叠加导致的“跳帧”问题，实现真正流畅、可暂停/恢复的无限左向滚动效果。
本文介绍一种基于 css `@keyframes` 和 `animation-play-state` 的纯 css 解决方案，替代 jquery 动画逻辑，彻底消除因 dom 操作、定时器与 margin 动画叠加导致的“跳帧”问题，实现真正流畅、可暂停/恢复的无限左向滚动效果。
传统 JavaScript 驱动的无限跑马灯（如使用 setInterval + animate({ marginLeft }) + DOM 重排）存在多个性能瓶颈：动画与 JS 定时器不同步、marginLeft 突变重置引发视觉跳跃、频繁 DOM 操作阻塞主线程，且 flex 布局下 margin 变化易受 gap 和盒模型干扰，最终导致滚动不连贯。
推荐方案：纯 CSS 无限滚动动画
核心思路是——避免运行时修改样式或 DOM，改用声明式 CSS 动画。通过以下三步实现：
-
内容双倍复制：将原始
<li>列表完整复制一份拼接在末尾，形成视觉上无缝衔接的循环源； -
使用
transform: translateX()动画：相比margin-left，transform启用 GPU 加速，不触发重排（reflow），动画更稳定； -
利用
animation-play-state: paused控制暂停：配合:hover伪类，零 JS 即可实现悬停暂停/移出恢复。
以下是精简可靠的实现代码：
/* 基础卡片样式（保持不变） */
.testimonial-cards {
list-style: none;
display: flex;
gap: 56px 31px;
margin: 0 auto;
width: max-content;
flex-wrap: nowrap;
}
.testimonial-cards li {
width: 100%;
max-width: 500px;
min-height: 400px;
}
.marqueslide .marqueme {
flex: 0 0 auto;
margin-right: 20px;
}
.testimonial-cards .card-item {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
background: #FFFFFF;
border-radius: 12px;
padding: 24px;
border: 1px solid #000;
}
/* ✅ 核心：CSS 跑马灯动画 */
.marquestarthere {
animation: marquee 8s linear infinite;
/* 关键：确保动画起始/结束位置对齐，避免跳变 */
}
.marquestarthere:hover {
animation-play-state: paused;
}
@keyframes marquee {
0% {
transform: translateX(0);
}
100% {
/* 向左移动一个完整可视区宽度（即所有原始项总宽度） */
/* 此处 -50% 是因双倍内容：动画全程只需移动一半长度即可完成“视觉循环” */
transform: translateX(-50%);
}
}
? 关键细节说明：
-
translateX(-50%)的设定依赖于内容已双倍复制（即原始 N 项 + 完全相同的 N 项）。这样当动画从0%运行到100%，元素向左平移自身总宽度的 50%，恰好使第二组首项滑入第一组末项位置，实现无缝衔接； - 动画时长
8s可根据内容密度和体验需求调整（越长越舒缓，越短越迅捷），但需与内容总宽度匹配以保证匀速感； - 无需任何 JavaScript 初始化或事件监听，语义清晰、性能卓越、易于维护。
✅ 优势总结：
- ✅ 零跳帧：
transform动画由合成器处理，不受主线程 JS 执行影响； - ✅ 零 JS 依赖：删除全部 jQuery 逻辑，降低包体积与兼容性风险；
- ✅ 响应式友好：动画自动适配视口缩放与字体变化；
- ✅ 可访问性增强：原生支持
prefers-reduced-motion（可通过媒体查询降级）； - ✅ 维护成本低：样式即逻辑，无状态管理、无定时器清理隐患。
如需进一步优化，可添加如下媒体查询以尊重用户偏好：
@media (prefers-reduced-motion: reduce) {
.marquestarthere {
animation: none;
}
}
至此，一个高性能、高可用、符合现代 Web 最佳实践的无限跑马灯组件即刻就绪。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
