动画Div间出现抖动白线问题求助

针对你遇到的无限滚动波浪头部出现抖动白线的问题，给你几个实用的修复方案，可逐个尝试：

• 消除内联块元素间隙
  即便设置了font-size:0，inline-block元素仍可能因HTML换行产生细微间隙。可以：

  • 把HTML中两个.imWrapper标签直接连写（去掉换行）：

    <div class="imcontainer">
      <div class="imWrapper"><img src="https://i.imgur.com/gvpbX3j.png"></div><div class="imWrapper"><img src="https://i.imgur.com/gvpbX3j.png"></div>
    </div>
    

  • 给.imcontainer额外添加字符间距重置：

    .imcontainer{
      white-space: nowrap;
      margin:0px;
      font-size:0;
      letter-spacing: -1px;
      word-spacing: -1px;
    }
    

• 强制图片边缘重叠
  利用微小负边距让两张图重叠1像素，直接覆盖可能出现的白线：

  .imWrapper img {
    margin-right: -1px;
    display: block; /* 去掉图片默认的行内元素间隙 */
  }
  

  或者调整动画结束位置，让位移超出100%一点：

  @keyframes slideAnim {
    from {
      transform: translateX(0%);
    }
    to {
      transform: translateX(-100.1%);
    }
  }
  

• 触发GPU加速提升渲染稳定性
  用translate3d替代translateX，强制浏览器使用GPU渲染动画，减少像素偏移抖动：

  @keyframes slideAnim {
    from {
      transform: translate3d(0%, 0, 0);
    }
    to {
      transform: translate3d(-100%, 0, 0);
    }
  }
  

• 匹配容器背景色
  如果白线是容器背景透出导致的，给.imcontainer设置和图片顶部一致的背景色：

  .imcontainer{
    /* 替换为你图片顶部的实际颜色值 */
    background-color: #87CEEB;
    white-space: nowrap;
    margin:0px;
    font-size:0;
  }
  

• Gatsby StaticImage特殊处理
  针对StaticImage生成的容器，确保无额外间距：

  <StaticImage
    src="../your-wave-image.png"
    imgStyle={{ margin: 0, padding: 0, display: 'block' }}
    placeholder="none" /* 禁用占位图避免额外元素干扰 */
  />
  

内容的提问来源于stack exchange，提问作者Greta