CSS 图像滚动动画停止得太快

Answer 1

只需添加更多关键帧：

@keyframes scroll {
      0% {
        transform: translateX(0);
      }
      25% {
        transform: translateX(25%);
      }
      50% {
        transform: translateX(50%);
      }
      75% {
        transform: translateX(75%);
      }
      100% {
        transform: translateX(-100%);
      }
    }

Answer 2

将 10 秒替换为 200 毫秒（或小于 10 秒的值）以加快动画速度。这会减少整个动画的持续时间。

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

这会自动提高速度！ 如果动画停止，则添加 50% 关键帧，如下所示：

@keyframes youranimation{
    0%{
         transform:translateX(0%);
    }
    50%{
         transform:translateX(-100%); 
    }
    100%{
        transform:translateX(0%);
    }
}