本文详解解决css图片滚动动画提前中断的问题，通过优化关键帧定义实现真正无限平滑滚动，适配不同尺寸图片，并提供可直接部署的完整代码方案。
本文详解解决css图片滚动动画提前中断的问题，通过优化关键帧定义实现真正无限平滑滚动，适配不同尺寸图片，并提供可直接部署的完整代码方案。
原始代码中动画中断的根本原因在于：transform: translateX(-100%) 仅将容器整体向左移动了自身宽度（即 #bildband 的总宽度），但该值在 flex 容器中受子元素自然尺寸影响，且未考虑“无缝衔接”所需的冗余位移。当图片宽高不一、object-fit: cover 又强制裁剪时，浏览器计算的容器实际宽度存在偏差，导致动画在未完成完整循环前就重置，视觉上表现为“滚动约1.5张图后跳回起点”。
正确解法：引入中间关键帧，构建视觉连续性
单纯使用 0% → 100% 两段式动画无法保证无缝——因为动画结束时元素已完全移出视口，而下一轮从头开始会暴露空白。真正可靠的无限滚动需让内容“多跑一段”，形成首尾重叠的视觉缓冲。以下是优化后的核心 CSS：
@keyframes scroll {
0% {
transform: translateX(0);
}
25% {
transform: translateX(25%);
}
50% {
transform: translateX(50%);
}
75% {
transform: translateX(75%);
}
100% {
transform: translateX(-100%);
}
}
⚠️ 注意：这里的 25%、50%、75% 并非按图片数量平均分配，而是基于 容器总宽度的百分比位移。它确保动画全程匀速推进，并在终点前预留足够位移，使最后一张图的起始部分与第一张图的起始位置自然衔接。
完整可运行示例（适配 WordPress HTML Block）：
<div id="bildband-container" style="overflow: hidden; width: 100%; height: 300px;">
<div id="bildband" style="display: flex; animation: scroll 12s linear infinite;">
@@##@@
@@##@@
@@##@@
</div>
</div>
<style>
@keyframes scroll {
0% { transform: translateX(0); }
25% { transform: translateX(25%); }
50% { transform: translateX(50%); }
75% { transform: translateX(75%); }
100% { transform: translateX(-100%); }
}
</style>
✅ 关键实践要点：
- 为
添加 flex-shrink: 0，防止 flex 布局自动压缩图片；
- 容器 #bildband-container 显式设置 height，避免因图片高度不一致导致布局抖动；
- 动画时长（如 12s）建议根据图片总数和视觉节奏微调，图片越多可适当延长；
- 若需更高兼容性，可在 @keyframes 前添加 -webkit- 前缀（现代浏览器通常无需）；
- 避免在 WordPress 中重复定义 结构——HTML Block 仅需内联样式与 DOM 片段。
通过此方案，无论图片原始尺寸是否统一，都能实现流畅、无卡顿、真正无限循环的横向滚动效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
