jquery animate（）颜色多次，每5秒一次，然后循环/重新启动

我不熟悉编写自己的jQuery。我已经加载了jQuery和，并在5秒延迟后管理了一个简单的彩色动画，带有1秒的过渡：

$("h1").delay(5000).animate({
    color: "blue"
}, 1000 );

我下一步要做的是一次又一次地改变颜色，每5秒改变一次蓝色、绿色、红色、粉色、橙色，然后让这个循环不停地重复下去

我发现这有助于显示颜色可以在变量中设置，但我不确定从哪里开始，并在完成后重新开始循环

如果您有任何帮助和/或链接，我们将不胜感激。

请尝试以下内容：

这方面的CSS解决方案是：

---

或者稍微短一点，谢谢你的欢呼——第一个看起来很有效，但是有几行代码我无法理解他们在做什么。第二个小提琴只会更改为阵列中的第一种颜色，然后停止。谢谢。我需要按顺序发射颜色，但不是随机的。嗯……当我点击链接并加载小提琴时，我等了10秒钟，什么也没发生。我也试着点击RUN，但什么也没发生。我让你的代码在JFIDLE之外工作，并且不得不在第6行中添加++，我注意到你在第1行中有这样的代码。我不能使用CSS动画，因为它不能与我正在使用的其他javascript一起工作。你能做一个代码更改，让它与switchClass一起工作而不是动画，我可以把类名放在变量数组中吗？是的，我可以，但它不会动画。它会立即改变颜色。哦，switchClass不能设置动画？如果我能在CSS中定义颜色，这对我的情况会更好——我使用的是SCSS变量。另外，我需要更改SVG上的fill属性，而这不适用于animate。

var c = 0;
setInterval(function () {
    var colors = ['blue', 'green', 'red', 'olive', 'yellow']
    if (c > colors.length - 1) c = 0;
    $("h1").animate({
        color: colors[c++]
    }, 1000);
}, 5000);

h1 {
    animation: colorChanger 60s infinite;
    -moz-animation: colorChanger 60s infinite;
    -webkit-animation: colorChanger 60s infinite;
}

@-moz-keyframes colorChanger {
    from {
        color: blue;
        animation-duration: 1s;
    }
    20% {
        color: green;
        animation-duration: 1s;
    }
    40% {
        color: red;
        animation-duration: 1s;
    }
    60% {
        color: olive;
        animation-duration: 1s;
    }
    80% {
        color: yellow;
        animation-duration: 1s;
    }
    to {
        color: brown;
        animation-duration: 1s;
    }
}
@-webkit-keyframes colorChanger {
    from {
        color: blue;
        animation-duration: 1s;
    }
    20% {
        color: green;
        animation-duration: 1s;
    }
    40% {
        color: red;
        animation-duration: 1s;
    }
    60% {
        color: olive;
        animation-duration: 1s;
    }
    80% {
        color: yellow;
        animation-duration: 1s;
    }
    to {
        color: brown;
        animation-duration: 1s;
    }
}