本文介绍如何通过 css 动画让图像在固定宽高的容器中无缝向右循环滚动，始终保持填满视口效果，避免内容溢出或留白。
本文介绍如何通过 css 动画让图像在固定宽高的容器中无缝向右循环滚动，始终保持填满视口效果，避免内容溢出或留白。
要实现图像在容器内“永不停止、不露空、不越界”的向右无限平移动画（如声波图、进度条背景等），关键在于利用负起始位移 + 百分比位移 + 容器裁剪三者协同工作，而非简单从 0% 移动到 100%。
✅ 正确实现原理
- 容器需严格限制尺寸并隐藏溢出：使用 overflow: hidden 配合明确的 width（推荐用 CSS 自定义属性便于维护）；
- 图像需覆盖整个容器宽度：通过 object-fit: cover 确保图像按比例缩放填充，同时保持宽高比可控；
- 动画需“跨屏衔接”：让图像从 -100%（完全左移，即图像右边缘对齐容器左边缘）开始，平滑移动至 +100%（完全右移，即图像左边缘对齐容器右边缘）。这样当动画循环时，图像会自然“接续”，视觉上形成无缝流动效果。
? 推荐代码实现
.sound-wave-container {
--width: 200px; /* 建议设为图像原始宽度，便于计算 */
outline: 1px inset #999;
position: relative;
font-size: 0; /* 消除 inline 元素默认基线间隙 */
overflow: hidden;
width: var(--width);
height: 60px; /* 可选：显式设高，避免高度塌陷 */
}
.sound-wave {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
animation: loop 10s linear infinite;
}
@keyframes loop {
from {
transform: translateX(-100%);
}
to {
transform: translateX(100%);
}
}
<div class="sound-wave-container py-8"> <img src="https://placekitten.com/200/300?x-oss-process=image/resize,p_40" class="sound-wave" alt="Sound Wave"> </div>
⚠️ 注意事项
- 图像原始宽度建议与 --width 一致（如本例 200px），否则 translateX(-100%) 的基准是容器宽度，可能导致错位；若图像更宽，可改用 background-image + background-position 方案获得更高精度控制；
- 不要遗漏 display: block 或 font-size: 0，否则
作为 inline 元素可能在容器底部产生空白间隙；
- 动画时长（如 10s）可根据节奏需求调整，越短越快，越长越舒缓；
- 若需响应式适配，可将 --width 改为 100% 并配合父容器约束，但需同步测试 object-fit 行为是否符合预期。
该方案轻量、兼容性好（支持所有现代浏览器及 IE10+），无需 JS 即可实现专业级循环动效。
