本文详解如何修复 css 图片横向滚动动画提前中断的问题，通过优化关键帧逻辑与容器布局，确保多尺寸图片在无限滚动中平滑衔接、不跳帧、不回弹。
本文详解如何修复 css 图片横向滚动动画提前中断的问题，通过优化关键帧逻辑与容器布局，确保多尺寸图片在无限滚动中平滑衔接、不跳帧、不回弹。
在 WordPress 等 CMS 中使用纯 CSS 实现图片横向无限滚动（如品牌 Logo 跑马灯）时，一个常见却易被忽略的问题是：动画运行约 1.5 张图后突然“重置”回起点，造成视觉卡顿或中断。这并非代码语法错误，而是 translateX(-100%) 的默认行为与实际布局逻辑不匹配所致。
根本原因在于：transform: translateX(-100%) 中的 -100% 是相对于父容器宽度（即 #bildband-container）计算的，而非子元素总宽度。当 #bildband 内部图片尺寸不一、且未显式设置宽度时，其自然流式宽度难以预测；而动画仅从 0% → -100% 线性位移，无法覆盖所有图片的实际总位移量，导致动画未完成就“触底反弹”。
✅ 正确解法：采用多段关键帧 + 正向过渡 + 负向归位策略，构建视觉无缝循环：
@keyframes scroll {
0% {
transform: translateX(0);
}
25% {
transform: translateX(25%);
}
50% {
transform: translateX(50%);
}
75% {
transform: translateX(75%);
}
100% {
transform: translateX(-100%);
}
}该写法的关键在于：
立即学习“前端免费学习笔记（深入）”；
- 前 75% 时间内，动画持续正向推进（25%, 50%, 75%），推动内容逐步向左移动；
- 最后 25% 时间内，一次性位移到 -100%（即容器宽度的负值），实现“瞬移归位”，配合 infinite 属性形成视觉连续性；
- 避免了单次 0% → -100% 因尺寸不确定性导致的位移不足问题。
同时，需补充两项关键样式保障稳定性：
#bildband {
display: flex;
animation: scroll 10s linear infinite;
/* 新增：防止 flex 项目换行 & 强制单行 */
flex-wrap: nowrap;
/* 新增：确保总宽度足够容纳所有图片（关键！）*/
width: max-content; /* 或使用具体值如 300vw，但 max-content 更健壮 */
}
/* 可选：统一图片高度并保持宽高比 */
img {
height: 300px;
width: auto;
object-fit: cover;
flex-shrink: 0; /* 防止图片被 flex 压缩 */
}⚠️ 注意事项：
- 不要移除 object-fit: cover —— 它对响应式图片裁剪至关重要，问题根源不在它；
- 避免设置 img { width: 100px } 等固定宽 —— 这会破坏原始比例，应优先用 height + object-fit 控制；
- 若仍出现闪烁，可添加 will-change: transform 到 #bildband 提升渲染性能；
- 在 WordPress HTML Block 中，请确保仅粘贴
最终效果：无论图片原始尺寸是否一致，滚动均能稳定覆盖全部内容，并以自然流畅的方式无限循环——真正实现专业级 Logo 跑马灯体验。
