如何实现背景图片无限循环从右向左滑动动画？

要实现背景从右向左无缝无限滑动，关键是让动画的起始/结束位置视觉上完全衔接，避免循环时的跳帧。以下是两种优雅的实现方式：

方案一：适配非无缝背景图（通用方案） #

如果你的背景图不是无缝平铺的，可通过将背景尺寸设为容器的2倍，配合水平重复来实现无缝循环：

.container {
  height: 200px;
  width: 500px;
  font-size: 200px;
  font-family: sans-serif;
  font-weight: 600;
  background-image: url('https://i.ibb.co/5F5H2S2/background.jpg');
  background-size: 200% 100%; /* 宽度设为容器的2倍，高度铺满容器 */
  background-repeat: repeat-x; /* 开启水平重复 */
  animation: background-slide 5s linear infinite;
}

@keyframes background-slide {
  0% {
    background-position: 100% 0; /* 初始状态：背景图右侧对齐容器左侧 */
  }
  100% {
    background-position: 0 0; /* 结束状态：背景图左侧对齐容器左侧 */
  }
}

<div class="container">hello</div>

原理说明：

• background-size: 200% 100% 让背景图拉伸到容器宽度的2倍，容器内始终显示背景图的一半内容
• 动画从100%滑到0时，背景图的后半部分会通过repeat-x自然衔接前半部分，循环时视觉完全连续，不会出现跳回初始位置的突兀感

方案二：适配无缝平铺背景图 #

如果你的背景图本身是可以无缝拼接的（比如纹理、图案类），可以直接利用背景重复特性，让背景图向左滑动自身宽度的距离：

.container {
  height: 200px;
  width: 500px;
  font-size: 200px;
  font-family: sans-serif;
  font-weight: 600;
  background-image: url('https://i.ibb.co/5F5H2S2/background.jpg');
  background-size: auto 100%; /* 保留背景图原始宽度，高度铺满容器 */
  background-repeat: repeat-x;
  animation: background-slide 5s linear infinite;
}

@keyframes background-slide {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -100% 0; /* 向左滑动一个背景图的宽度 */
  }
}

原理说明：

• 当背景图滑动自身宽度的距离后，重复的背景会刚好接上当前显示的内容，循环时完全无缝，动画逻辑更简洁

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