如何实现容器内无限向右循环动画且元素不超出并保持填充

原实现中图片向右移动时会超出容器，且移动过程中容器会出现空白，无法保持始终填满的视觉效果。以下是两种可行的修改方案：

方案一：使用背景图实现（推荐） #

这种方式更简洁，无需额外DOM元素，通过背景重复和位移实现无缝循环。

React代码 #

<div className="sound-wave-container py-8">
  <div 
    className={`sound-wave-bg ${!recording ? 'animate-wave' : ''}`}
  />
</div>

CSS代码 #

.sound-wave-container {
  outline: 1px inset #999;
  position: relative;
  overflow: hidden;
  width: 300px;
  height: 60px; /* 根据你的波形图实际高度调整 */
}

.sound-wave-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 100%;
  background-image: url('你的波形图路径'); /* 替换为Wave图的真实路径 */
  background-repeat: repeat-x;
  background-size: 50% 100%; /* 单张背景图宽度等于容器宽度 */
}

@keyframes waveMove {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%); /* 平移距离为容器宽度，实现无缝循环 */
  }
}

.animate-wave {
  animation: waveMove 2s linear infinite; /* 2s为动画时长，可按需调整速度 */
}

静态HTML示例 #

<div class="sound-wave-container py-8">
  <div class="sound-wave-bg animate-wave"></div>
</div>

方案二：使用双img标签实现 #

如果必须保留img标签，可以用两张相同图片并排，通过容器平移实现无缝效果。

React代码 #

<div className="sound-wave-container py-8">
  <div className={`sound-wave-wrapper ${!recording ? 'animate-wave' : ''}`}>
    <img src={Wave} alt="Sound Wave" />
    <img src={Wave} alt="Sound Wave" />
  </div>
</div>

CSS代码 #

.sound-wave-container {
  outline: 1px inset #999;
  position: relative;
  overflow: hidden;
  width: 300px;
  height: 60px; /* 匹配波形图高度 */
}

.sound-wave-wrapper {
  display: flex;
  height: 100%;
  width: 200%; /* 两张图总宽度为容器的2倍 */
}

.sound-wave-wrapper img {
  width: 50%; /* 每张图宽度等于容器宽度 */
  height: 100%;
  object-fit: contain;
}

@keyframes waveMove {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%); /* 平移一张图的宽度，实现无缝衔接 */
  }
}

.animate-wave {
  animation: waveMove 2s linear infinite;
}

核心修改点 #

1. 用双倍宽度的容器/背景配合横向重复，确保动画过程中容器始终被填满
2. 动画平移距离设为容器宽度的一半，刚好让后续内容无缝接上前一段，避免空白
3. 固定容器高度，确保波形图能正确填充容器，不会出现拉伸或错位

内容的提问来源于stack exchange，提问作者Kiran S youtube channel