如何将 CSS 动画的结尾连接到开头，以便它顺利继续？

Question

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

.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;
}

所以我希望条形图永远循环，向右移动。我不擅长解释所以这里是 image

这是我当前的动画代码，当然只是让它移出屏幕然后再回来，这正是我不想要的。如果有人能指出正确的方向，我将不胜感激，谢谢。

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

Answer 1

调用颜色时根本没有指定背景大小。这是我对您的代码所做的编辑，添加了背景大小并将关键帧更改为百分比，而不是翻译。

.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%}
}

Answer 2

所以只用 CSS 做这个有点棘手，但是这可以通过改变框架上的背景渐变来实现。 Codepen link

HTML:

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

CSS:

.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);
  }
}

如何将 CSS 动画的结尾连接到开头，以便它顺利继续？

How can I connect a CSS animation's end to the beginning so it smoothly continues?

css

css-transforms

css-animations