CSS图片滚动动画提前停止问题排查求助

原代码的核心问题在于动画滚动距离的计算逻辑：transform: translateX(-100%) 中的 100% 是指容器 #bildband 的自身宽度，但当图片尺寸不一时，容器宽度等于所有图片的总宽度，滚动 -100% 后会瞬间跳回初始位置，此时图片还未完全滚出视口，导致看起来只滚动了1.5张就停止。同时缺少无缝滚动的图片衔接逻辑，没有复制图片组来填补滚动后的空白。

方案一：纯CSS实现（需手动计算图片总宽度） #

适合图片尺寸固定、可以提前计算总宽度的场景：

1. 复制一组相同的图片到滚动容器中，实现无缝衔接
2. 手动计算所有图片的总宽度，设置动画滚动距离等于该宽度

<div id="bildband-container">
  <div id="bildband">
    <img src="url1" alt="">
    <img src="url2" alt="">
    <img src="url3" alt="">
    <!-- 复制一组图片用于无缝衔接 -->
    <img src="url1" alt="">
    <img src="url2" alt="">
    <img src="url3" alt="">
  </div>
</div>

<style>
#bildband-container {
  overflow: hidden;
  width: 100%;
}

#bildband {
  display: flex;
  /* 替换为「单组图片总宽度 × 2」 */
  width: calc(750px * 2);
  animation: scroll 10s linear infinite;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    /* 替换为单组图片的总宽度 */
    transform: translateX(-750px);
  }
}

img {
  width: auto;
  height: 300px;
  object-fit: cover;
  /* 禁止图片被flex容器压缩，保证宽度准确 */
  flex-shrink: 0;
}
</style>

方案二：JavaScript动态计算（适合图片尺寸不固定的场景） #

自动计算图片总宽度，无需手动修改数值，适配动态图片：

<div id="bildband-container">
  <div id="bildband">
    <img src="url1" alt="">
    <img src="url2" alt="">
    <img src="url3" alt="">
  </div>
</div>

<style>
#bildband-container {
  overflow: hidden;
  width: 100%;
}

#bildband {
  display: flex;
  animation: scroll linear infinite;
}

img {
  width: auto;
  height: 300px;
  object-fit: cover;
  flex-shrink: 0;
}
</style>

<script>
const bildband = document.getElementById('bildband');
// 复制图片组实现无缝衔接
const clone = bildband.cloneNode(true);
bildband.appendChild(clone);

// 计算单组图片的总宽度
let totalWidth = 0;
const images = bildband.querySelectorAll('img');
for (let i = 0; i < images.length / 2; i++) {
  totalWidth += images[i].offsetWidth;
}

// 设置动画参数
bildband.style.animationDuration = '10s'; // 可调整滚动速度
// 动态生成动画关键帧
const keyframes = `
  @keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-${totalWidth}px); }
  }
`;
const styleSheet = document.createElement('style');
styleSheet.textContent = keyframes;
document.head.appendChild(styleSheet);
</script>

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