如何连接CSS动画'；让我们从头开始，这样才能顺利地继续下去？

我的页面顶部有一个彩虹条：

.rainbow-bar {    /* Epic rainbow bar */
    height:8px;
    background: black; /* fallback */
    background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
    background-size: 200% 200%;
    animation: moveright 3s ease infinite;
    animation-direction: alternate;
}

所以我想让酒吧永远循环，向右转。 我不善于解释，所以这里有一个

这是我目前的动画代码，当然，这只是让它离开屏幕，然后回来，这正是我不想要的。 如果有人能给我指出正确的方向，我会非常感激，谢谢

@keyframes moveright {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

---

调用颜色时，根本不指定背景大小。下面是我对代码的编辑，添加背景大小，并将关键帧更改为百分比，而不是平移

.rainbow-bar {    /* Epic rainbow bar */
    height:8px;
    background: black; /* fallback */
    background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
    background-size: 200% 200%;
    animation: moveright 3s ease infinite;
    animation-direction: alternate;
}

还有css的动画部分

@keyframes moveright {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

---

因此，仅使用CSS来实现这一点有点棘手，但是这可以通过改变帧上的背景渐变来实现

HTML:

---

不要在动画中使用翻译。谢谢你的回答。我原以为这样行得通，但看起来确实有些波涛汹涌。有没有办法让它看起来不那么波涛汹涌？如果不是，我就用这个。嘿，我刚刚编辑了这个，再检查一遍。我不小心把颜色弄混了。我已经编辑了post和codepen来解决这个问题。

<div class='bg'>
  <div class='rainbow-bar'>
  </div>
</div>

.bg {
    background: black; /* fallback */
}

.rainbow-bar {    /* Epic rainbow bar */
    height: 3px;
    animation: move .75s ease infinite;
}

@keyframes move {
  0% {
    background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
  }
  14.3% {
    background: linear-gradient(to right, violet, red, orange, yellow, green, blue, indigo);
  }
  28.6% {
    background: linear-gradient(to right, indigo, violet, red, orange, yellow, green, blue);
  }
  42.9% {
    background: linear-gradient(to right, blue, indigo, violet, red, orange, yellow, green);
  }
  57.2% {
    background: linear-gradient(to right, green, blue, indigo, violet, red, orange, yellow);
  }
  71.5% {
    background: linear-gradient(to right, yellow, green, blue, indigo, violet, red, orange);
  }
  85.8% { 
    background: linear-gradient(to right, orange, yellow, green, blue, indigo, violet, red);
  }
  100% {
    background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
  }
}