如何避免CSS横向跑马灯动画重置、滚动末尾出现空白间隙的问题

问题原因 #

• 原方案给每个独立的span元素绑定了相同动画，所有元素同步位移而非整体内容滚动
• 动画移动距离固定为200vw，未匹配滚动内容的总宽度，内容全部滚出视野后剩余的动画区间就会显示为空白
• 没有做重复内容拼接，自然无法实现内容首尾无缝衔接的效果

修正后代码 #

HTML部分 #

<div class="marquee">
  <!-- 滚动内容容器 -->
  <div class="marquee-content">
    <span><img src="https://www.samint.co.za/wp-content/uploads/image-placeholder-705x705.jpg" alt=""></span>
    <span><img src="https://www.samint.co.za/wp-content/uploads/image-placeholder-705x705.jpg" alt=""></span>
    <span><img src="https://www.samint.co.za/wp-content/uploads/image-placeholder-705x705.jpg" alt=""></span>
    <!-- 复制一份完全相同的内容，用于衔接滚动 -->
    <span><img src="https://www.samint.co.za/wp-content/uploads/image-placeholder-705x705.jpg" alt=""></span>
    <span><img src="https://www.samint.co.za/wp-content/uploads/image-placeholder-705x705.jpg" alt=""></span>
    <span><img src="https://www.samint.co.za/wp-content/uploads/image-placeholder-705x705.jpg" alt=""></span>
  </div>
</div>

CSS部分 #

.marquee { 
  width: 100vw;
  background: red;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: hidden;
  position: relative;
}

.marquee-content {
  display: flex;
  white-space: nowrap;
  /* 动画时长可自行调整，数值越大滚动越慢 */
  animation: marquee 10s linear infinite;
}

.marquee-content span {
  display: inline-block;
  margin: 0 10px;
  width: 210px;
}

.marquee-content span img{
  width: 210px;
  height: auto;
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    /* 整体向左移动一个内容容器宽度的50%，刚好第一份内容完全滚出，第二份内容衔接到位 */
    transform: translateX(-50%);
  }
}

实现原理 #

• 把两套完全相同的滚动内容拼接在一起，总长度是原本内容的2倍
• 动画仅作用于整体内容容器，移动距离设为自身宽度的50%，刚好是第一套内容的总宽度，动画结束时第二套内容的位置和动画开始时第一套内容的位置完全重合，无限循环时就不会出现卡顿和空白间隙
• 滚动速度可通过调整animation的时长数值控制，内容数量变化时也不需要修改动画参数，适配性更强

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