如何将CSS动画的末端连接到开头，以便顺利进行？ [英] How can I connect a CSS animation's end to the beginning so it smoothly continues?

问题描述

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

I have a rainbow bar that sits at the top of my page:

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

所以我希望该条永远循环，向右移动。
我不好意思解释，因此这里是图片

So I want the bar to loop forever, moving to the right. I'm bad at explaining so heres an image

这是我当前使用的动画代码，当然，它只是使其移到屏幕外然后返回，这正是我所不希望的。
如果有人能指出正确的方向，我将非常感激，谢谢。

This is the current animation code I have which of course just makes it move offscreen then come back, which is exactly what I do not want. If anyone could point me in the right direction I would really appreciate it, thanks.

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

推荐答案

CSS，但是可以通过更改框架的背景渐变来实现。 代码笔链接

So it's kinda tricky to do this with just CSS, however this can be achieved by changing the background gradient on the frames. 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动画的末端连接到开头，以便顺利进行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！