Javascript 循环颜色转换与CSS

我希望能够为我的网站的背景色循环一个颜色转换，这样当用户浏览时，它会在两种微妙不同的色调之间慢慢转换，以给他们的浏览体验带来变化。我想要的东西如下：

.background {
  background-color: #00A0D6;
  transition: background-color: 100s;
}

但是使用

背景色

循环回到

#00A0D6

，然后在到达

#00A0D6

后立即开始转换回

#00B1D7

。我也希望这种情况自动发生，从用户浏览网站的那一刻起

---

如果可能的话，我想做这在香草CSS。如果没有，有没有办法使用Javascript循环以这种方式循环值？可能是jQuery库？我希望使用处理器效率最高的方法，仍然保持平滑过渡，因为这适用于在线RPG，它将同时执行许多其他过渡和数据存储。

您可以使用CSS

@keyframes

实现您想要的：

@keyframes changeColor {
    from {
        background-color: #00A0D6;
    }
    to {
        background-color: #00B1D7;
    }
}

然后将其与所需元素中的

动画

属性一起使用：

html, body {
    animation: changeColor 100s infinite alternate;
}

---

更多关于CSS关键帧的信息。

这种方法很有效，而且非常有用，但在100秒结束后过渡是瞬时的。我想要更微妙的转变，比如时间梯度。我想这只是添加更多帧的问题？或者我会在Keyframes文档中找到一些允许我在颜色值之间自动平滑插值的内容吗？您需要使用“alternate”，如中所示。@gcampbell是对的，只是忘记了那个部分。答案已更新。