Javascript 无限背景色循环

我有一个背景图像变换器，效果非常好。然而，我需要这是一个无限循环，所以在红色之后，它回到橙色并再次开始循环。有人能帮忙吗

请随意使用wither css html或javascript

请帮忙

：根目录{
--动画持续时间：2000ms；
}
#home.bg滑块{
位置：绝对位置；
宽度：100%；
身高：100%；
溢出：隐藏；
背景色：#ffc60b；
}
#家，盒子{
最小宽度：100%；
宽度：100%；
身高：100%；
位置：绝对位置；
溢出：隐藏；
}
#home.ediv2{
背景#90a0d6；
z指数：10；
动画延迟：5s；
}
#home.ediv3{
背景:#ff6666；
z指数：20；
动画延迟：10秒；
}

您可以在css上将动画迭代次数设置为无限。如果第一种颜色与最后一种颜色相同，它将看起来是无限的。

我将解释我在这里做了什么

正如我在评论中提到的，我使用了

@keyframes

。因此，我删除了

ediv1

和

ediv2

分区，因为它们不是必需的

我定义了一个名为

magicColor

的关键帧规则，并将其应用于

.bgsloider

类

：根目录{
--动画持续时间：2000ms；
}
#home.bg滑块{
位置：绝对位置；
宽度：100%；
身高：100%；
溢出：隐藏；
/*背景色：#ffc60b*/
动画：magicColor 3s无限；
-webkit动画计时功能：步骤（1，结束）；/*使用此功能可防止褪色效果*/
}
@关键帧magicColor{
0%{背景色：#ffc60b；}
50%{背景：#90a0d6；}
100%{背景：#ff6666；}
}
#家，盒子{
最小宽度：100%；
宽度：100%；
身高：100%；
位置：绝对位置；
溢出：隐藏；
}
/*
#home.ediv2{
背景#90a0d6；
z指数：10；
动画延迟：5s；
}
#home.ediv3{
背景:#ff6666；
z指数：20；
动画延迟：10秒；
}*/

---

您需要这样的东西吗

试用：

我们使用的颜色。至于动画，有两种方法可以实现这一点：

CSS转换 因此，可以通过以下方式实现：

html{
溢出：隐藏；
}
.bg滑块{
位置：绝对位置；
宽度：400%；
身高：100%；
左：0；
排名：0；
背景：线性梯度（90度，#ffc60b 25%，#ff6666 25%50%，#90a0d6 50%75%，#ffc60b 75%100%）；
动画：幻灯片5s无限；
}
@关键帧滑动{
33% {
转化：translateX（-25%）；
}
66% {
转化：translateX（-50%）；
}
100% {
转化：translateX（-75%）；
}
}

---

您可以为此使用CSS

@关键帧。那会容易得多。我不能，因为颜色应该从橙色到蓝色再到红色。它不应该像使用
@关键帧那样在两者之间淡入淡出。请看一看简约可复制的例子，了解我的意思@debsmitapaul这是正确的，但是滑动动画现在消失了。有没有办法把它带回来，但保持无限循环@黛布斯密特保哦好的。。。什么样的滑动动画？看看我提供的可复制的极简示例。当颜色改变时，它具有滑动效果。我使用的是
animate.css
，对此我深表歉意。我希望它是全屏的：
宽度：100%高度100%
但当我尝试这样做时，会出现3个框。嗨！正如我们在聊天中所讨论的，下面是使用jQuery插件Slick的jQuery解决方案。不，这些颜色不应该淡入淡出。请看一个简单的可复制的例子作为参考。请看其他的答案。这是不正确的。我改变了答案。。请看上面的^@barhatsor不要通过位置属性（如
left
top
等）设置动画。为此，我们使用了GPU加速
转换。@RokoC.Buljan如果不使用位置属性，会有什么解决方案？如何使用
transform
属性来解决此问题？@RokoC.Buljan我添加到了答案中。检查上面^
<section id="message">
<h1>Rainbow<br/>Goodness</h1>
<p>So this is currently set to color cycle every 175 seconds, which is the same as 60 seconds per color divided by two, or 30 seconds per color, assuming roygbiv, even though I only programmed Red, Green, and Blue. The timing itself should actually make it so that each color gets its time, as no color should be a rest, anyhow. Arguably I should have done more to get the full rainbow. We hardly touched the luminosity spectrum, although I think some of that does make it in.</p>
<p>The font color looping is based on a Cyan-Magenta-Yellow loop, as the opposite of RGB.</p></section>

    body {
      animation: colorchange 2s linear 1s infinite; /* animation-name followed by duration in seconds*/
         /* you could also use milliseconds (ms) or something like 2.5s */
      -webkit-animation: colorchange 2s linear 0s infinite alternate; /* Chrome and Safari */
    }

    @keyframes colorchange
    {
      0%   {background: red; color: cyan;}
      33%  {background: green; color: magenta;}
      66%  {background: blue; color: yellow;}
      100% {background: red; color: cyan;}
   }

    @-webkit-keyframes colorchange /* Safari and Chrome - necessary duplicate */
    {
      0%   {background: red; color: cyan;}
      33%  {background: green; color: magenta;}
      66%  {background: blue; color: yellow;}
      100% {background: red; color: cyan;}
   }
section {
  width: 33vw;
  margin: 0 auto;
}
#message {
  text-align: center;
  color: inherit;
  opacity: 75%;
  mix-blend-mode: difference;
  font-family: Cooper Black, Helvetica, Arial;
}
h1 {
  font-size: 4.69em;
}
p {
  font-size: 1.6em;
  font-family: Helvetica Neue, Helvetica, Arial;
}