该教程详解通过统一父容器动画替代子元素独立动画，结合 css 布局优化与溢出控制，彻底解决多图水平无缝滚动时出现的微小白线抖动问题。
该教程详解通过统一父容器动画替代子元素独立动画，结合 css 布局优化与溢出控制，彻底解决多图水平无缝滚动时出现的微小白线抖动问题。
在构建动态波浪式页眉（如无限横向滚动背景图）时，开发者常采用多个相同图片并排 + 各自 translateX 动画的方式。但正如示例中所见：当两个 <div class="imWrapper"> 分别执行完全同步的 slideAnim 动画时，浏览器渲染引擎因亚像素计算偏差、重绘时机微差或布局重排抖动，极易在图像接缝处产生一条短暂闪现的白色细线——尤其在高DPI屏幕或低帧率设备上更为明显。
根本原因在于：每个子元素独立运行动画，即使 keyframes 完全一致，其 transform 的插值计算仍可能因渲染管线调度产生毫秒级不同步，导致边界无法像素级对齐。解决方案不是“调 margin”或“加 overflow: hidden”，而是重构动画层级：
✅ 正确做法：将动画绑定到父容器，让所有子元素作为静态整体参与位移，确保接缝始终处于同一变换上下文，消除相对偏移风险。
以下是优化后的完整实现：
<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: 200%; /* 确保双图总宽撑满两倍容器，避免动画末尾留空 */
animation: slide 10s linear infinite; /* 动画时长可按需调整 */
}
.img-container img {
flex: 0 0 50%; /* 每张图占父容器宽度的50%，严格等分 */
height: auto;
display: block; /* 防止图片下方默认空白间隙 */
}
@keyframes slide {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%); /* 注意：此处是 -50%，非 -100%！因为总宽为200% */
}
}⚠️ 关键细节说明：
- width: 200% + flex: 0 0 50% 确保两张图紧密拼接、无间隙；
- translateX(-50%) 是核心：当父容器宽度为 200% 时，向左移动自身宽度的 50%，恰好使第二张图完全替代第一张图的位置，实现视觉无缝循环；
- display: block 消除 <img> 默认的行内元素基线间隙；
- overflow-x: hidden 在 html/body 层级双重设置，杜绝因滚动条或微小溢出引发的白边。
? 进阶提示（Gatsby 用户特别注意）：
若使用 <StaticImage>，请确保其包装的 DOM 结构与上述一致，并显式设置 imgStyle={{ display: 'block' }} 和 placeholder="none" 减少加载抖动。同时检查 Gatsby 图片组件是否注入了额外 margin 或 max-width，必要时用 !important 覆盖。
此方案不仅彻底消除白线，还降低渲染压力（单次动画 vs 多次）、提升兼容性，是制作专业级无缝滚动背景的推荐实践。
