本文详解通过统一父容器动画替代子元素独立动画，彻底解决多个并排图片在无缝循环滚动时出现的细微白线抖动问题，提升视觉流畅度。
本文详解通过统一父容器动画替代子元素独立动画，彻底解决多个并排图片在无缝循环滚动时出现的细微白线抖动问题，提升视觉流畅度。
在实现波浪式无缝滚动横幅（如动态页眉、背景图带）时，开发者常采用双图拼接 + 百分比位移动画的方式模拟无限滚动。但若为每个 <img> 或其包裹容器单独设置 transform: translateX() 动画（如原代码中两个 .imWrapper 各自执行 10s 线性位移），极易因浏览器渲染时序、子像素对齐、CSS 动画帧间插值精度差异，导致两图交界处出现1px 左右的白色细缝或闪烁抖动——尤其在高 DPI 屏幕或启用硬件加速后更明显。
根本原因在于：独立动画的两个元素无法保证 transform 位移完全同步。即使声明相同持续时间与缓动函数，浏览器仍可能因重排/重绘调度微差、四舍五入取整（如 translateX(-49.998%) vs -50.002%）造成瞬时错位，暴露父容器背景色（通常是白色）。
✅ 正确解法是：将动画逻辑上收至父容器，让所有子图作为静态整体参与位移。此时图像间无相对运动，仅父容器平滑拖动，彻底规避交界缝隙。
以下为优化后的完整实现：
<div class="img-container"> <img src="https://i.imgur.com/gvpbX3j.png" alt="Wave background"> <img src="https://i.imgur.com/gvpbX3j.png" alt="Wave background"> </div>
/* 全局防溢出，避免滚动条或边缘白边 */
html, body {
margin: 0;
padding: 0;
overflow-x: hidden; /* 关键：隐藏水平滚动条及潜在溢出 */
}
.img-container {
display: flex;
width: max-content; /* 让容器宽度由子图总宽决定 */
animation: slide 10s linear infinite;
/* 可选：启用硬件加速提升动画流畅度 */
will-change: transform;
}
.img-container img {
display: block;
width: 100vw; /* 每张图铺满视口宽度，确保无缝衔接 */
height: auto;
/* 防止图片默认行内基线对齐产生的底部空白 */
vertical-align: top;
}
@keyframes slide {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100vw); /* 精确位移一个视口宽度 */
}
}? 关键要点说明：
- 使用 display: flex 替代 inline-block，消除行内元素默认间距（空格、换行符导致的间隙）；
- width: 100vw 确保每张图严格等宽，且总宽为 200vw，动画终点 translateX(-100vw) 刚好使第二张图完全覆盖第一张图初始位置，形成视觉无缝；
- will-change: transform 提示浏览器提前启用 GPU 加速，减少卡顿；
- 若使用 Gatsby 的 <StaticImage>，请确保其包装的 <picture> 或 <img> 也应用相同样式（如 width: 100vw; display: block），避免框架默认样式干扰。
? 进阶提示：如需更长循环周期或响应式适配，可将 100vw 替换为 calc(100vw * 2) 并调整动画终点为 translateX(-calc(100vw * 2))，但需确保容器内图片总宽 ≥ 动画位移距离，否则会出现空白期。
此方案已在 Chrome、Firefox、Safari 最新版中验证无抖动，是实现专业级无缝滚动动画的推荐实践。
