如何让纯CSS自动滑块动画反向（从左到右）播放？

我有一套纯HTML+CSS实现的自动滑块，默认从右向左滚动，现在需要调整为从左向右滚动。已将原SCSS转成纯CSS，单位替换为vw提升响应性，但修改flex-direction: row-reverse、justify-content: flex-end及动画方向后，动画虽能运行，却出现原方向滚动时没有的空白间隙，无法实现无缝循环效果。

原代码 #

HTML #

<div class="slider">
    <div class="slide-track">
        <div class="slide">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/2.png" height="100" width="250" alt="" />
        </div>
        <div class="slide">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/3.png" height="100" width="250" alt="" />
        </div>
        <div class="slide">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/4.png" height="100" width="250" alt="" />
        </div>
        <div class="slide">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/5.png" height="100" width="250" alt="" />
        </div>
        <div class="slide">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/6.png" height="100" width="250" alt="" />
        </div>
        <div class="slide">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/7.png" height="100" width="250" alt="" />
        </div>
        <div class="slide">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/1.png" height="100" width="250" alt="" />
        </div>
        <div class="slide">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/2.png" height="100" width="250" alt="" />
        </div>
        <div class="slide">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/3.png" height="100" width="250" alt="" />
        </div>
        <div class="slide">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/4.png" height="100" width="250" alt="" />
        </div>
        <div class="slide">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/5.png" height="100" width="250" alt="" />
        </div>
        <div class="slide">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/6.png" height="100" width="250" alt="" />
        </div>
        <div class="slide">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/7.png" height="100" width="250" alt="" />
        </div>
    </div>
</div>

原SCSS #

body {
    align-items: center;
    justify-content: center;
}

$animationSpeed: 40s;

@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-250px * 7))}
}

.slider {
    height: 100px;
    margin: auto;
    overflow:hidden;
    position: relative;
    width: auto;
    
    .slide-track {
        animation: scroll $animationSpeed linear infinite;
        display: flex;
        width: calc(250px * 14);
    }
    .slide {
        height: 100px;
        width: 250px;
    }
}

解决方案 #

核心思路 #

原滑块通过轨道向左移动一组滑块的宽度实现无缝循环，反向滚动时无需修改滑块排列顺序，只需调整动画的起始/结束偏移方向与数值，让轨道从「向左偏移一组滑块宽度」的位置，向右移动至初始位置，即可实现无间隙的从左到右滚动。

修改后的纯CSS代码（兼容px/vw单位） #

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  margin: 0;
}

/* 用CSS变量统一管理，方便替换为vw单位 */
:root {
  --slide-width: 250px; /* 替换为vw示例：13.02vw（250/1920*100） */
  --animation-speed: 40s;
}

@keyframes scroll-right {
  /* 初始位置：向左偏移一组滑块的宽度，让第二组滑块衔接在可视区域左侧 */
  0% {
    transform: translateX(calc(-1 * var(--slide-width) * 7));
  }
  /* 结束位置：回到初始偏移前的位置，此时第一组滑块刚好衔接可视区域右侧 */
  100% {
    transform: translateX(0);
  }
}

.slider {
  height: 100px;
  margin: auto;
  overflow: hidden;
  position: relative;
  width: auto;
}

.slide-track {
  animation: scroll-right var(--animation-speed) linear infinite;
  display: flex;
  width: calc(var(--slide-width) * 14); /* 保持两组滑块的总宽度 */
}

.slide {
  height: 100px;
  width: var(--slide-width);
}

问题原因说明 #

之前修改flex-direction: row-reverse会反转滑块排列顺序，同时动画方向调整后未匹配正确的起始偏移量，导致两组滑块衔接时出现空白间隙。保持原有滑块排列顺序，仅调整动画的偏移方向与初始位置，就能完美实现无缝循环的从左到右滚动。

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