本文详解如何使用纯 css 构建平滑、无缝的无限横向滚动动画，重点解决因元素宽度计算不准、间隙干扰或位移终点不匹配导致的“跳帧”和“闪断”问题。
本文详解如何使用纯 css 构建平滑、无缝的无限横向滚动动画，重点解决因元素宽度计算不准、间隙干扰或位移终点不匹配导致的“跳帧”和“闪断”问题。
要实现真正视觉无缝的无限横向滚动（如贡献者轮播），关键不在于简单复制 DOM 元素，而在于精确控制容器布局、子项尺寸与动画位移的数学一致性。原代码中 translateX(-400%) 无法对齐，正是因为未准确反映实际滚动总距离——6 个子项 + 重复副本共 12 项，但 flex 布局下每个 .infoCtb 的实际占比未被显式约束，导致 gap、默认 flex 分配及 max-width 干扰了整体宽度计算。
✅ 正确解法：基于 flex: 0 0 X% 的确定性布局
将每个 .infoCtb 设为固定宽度比例（而非依赖内容自适应），是实现可预测位移的基础：
.infoCtb {
flex: 0 0 50%; /* 每个占父容器宽度的 50% → 2 个并排填满一行 */
display: flex;
flex-direction: column;
align-items: center;
animation: loop 5s linear infinite;
overflow: hidden;
padding: 2px; /* 替代 gap，避免影响 translateX 计算 */
}? 为什么是
50%？因为display: flex容器中，若希望n个子项水平铺满且无换行，每个应设为100% / n。此处n = 2（即每屏显示 2 个卡片），故单个占50%。6 个原始项 → 总原始宽度 =6 × 50% = 300%；添加完全相同的副本后，总宽度 =600%。因此动画终点必须是translateX(-600%)，才能让副本首项精准接替原始末项位置。
? 完整修复版 CSS（精简高效）
.container-loop {
width: 100%;
display: flex;
position: relative;
overflow: hidden;
gap: 0; /* 彻底移除 gap，改用 padding 控制间距 */
-webkit-mask-image: linear-gradient(90deg, transparent, #111 20%, #fff 80%, transparent);
}
.infoCtb {
flex: 0 0 50%; /* 核心：锁定宽度比例 */
display: flex;
flex-direction: column;
align-items: center;
animation: loop 5s linear infinite;
overflow: hidden;
padding: 2px; /* 视觉间距由此控制 */
}
.infoCtb img,
.infoCtb span {
display: block;
width: 100%;
text-align: center;
}
@keyframes loop {
from { transform: translateX(0%); }
to { transform: translateX(-600%); } /* 12 项 × 50% = 600% */
}⚠️ 关键注意事项
-
不要手动写双份 HTML：动态复制更可靠且语义清晰。可在 JS 中一次性追加副本：
const loopEl = document.querySelector('.container-loop'); loopEl.innerHTML += loopEl.innerHTML; -
禁用
gap：gap会额外增加 flex 项间距，破坏translateX的像素级对齐。用padding替代。 -
图片高度统一处理：原代码中
max-height: 350px可能导致缩放不一致。建议为.infoCtb img添加height: auto; width: 100%; object-fit: cover;保障等比适配。 -
性能优化：添加
will-change: transform或transform: translateZ(0)可启用 GPU 加速（尤其在长列表中）：.infoCtb { will-change: transform; }
✅ 最终效果验证要点
- 动画时长（如
5s）需与内容量平衡：项越多，时间越长，否则滚动过快影响可读性； - 掩膜（
-webkit-mask-image）左右留白（20%/80%）确保渐隐过渡自然； - 在 Chrome/Firefox/Safari 中检查
transform是否触发合成层（DevTools → Rendering → Paint Flashing）。
通过将布局逻辑从“弹性估算”转为“比例锁定”，配合精准的位移终点计算，即可彻底消除滚动重置时的视觉撕裂，实现专业级无缝循环动画。
立即学习“前端免费学习笔记（深入）”；
