Javascript 如何创建无限改变不同背景颜色的循环动画

我正在尝试实现以下动画：

我有八个圆圈，四个小圆圈和四个大圆圈。第一个（小圆）为绿色背景色，其余小圆为灰色背景色，大圆为红色背景色。动画将随着每一秒的流逝，一次一个地为圆圈添加绿色背景色。当所有圆的背景色都为绿色时，整个动画将从零开始，延迟1秒。动画将无限重复动画

TLDR：

初始状态：1个绿色小圆，3个灰色小圆，4个红色大圆

中间：一次一个，每1秒将每个圆圈涂成绿色，直到所有圆圈都变成绿色

最终状态：4个小圆圈和4个大圆圈，颜色为绿色。重置初始状态并无限重复动画

--编辑开始--

对于那些对我提出的集体解决方案感兴趣的人，你可以在这里找到它，它涉及CSS和jQuery。当您第一次看到它时，它将使用jQuery；要查看纯CSS实现，请删除CSS中的注释，该注释将启用动画标记。确保注释掉jQuery

--编辑结束--

注意：我希望找到一个仅CSS的解决方案，但我对CSS动画非常熟悉，到目前为止这是一个真正的难题，这就是我来这里寻求帮助的原因。但是，如果不能单独使用CSS，那么请考虑使用jQuery解决方案。有鉴于此，以下是我在jQuery中尝试过但没有效果的内容：

HTML

jQuery

jQuery(document).ready(function(){
    var elements = [jQuery(".smallCircles :nth-child(1)"),
                    jQuery(".smallCircles :nth-child(2)"),
                    jQuery(".smallCircles :nth-child(3)"),
                    jQuery(".smallCircles :nth-child(4)"),
                    jQuery(".largeCircles :nth-child(1)"),
                    jQuery(".largeCircles :nth-child(2)"),
                    jQuery(".largeCircles :nth-child(3)"),
                    jQuery(".largeCircles :nth-child(4)")
                   ];
    var count = elements.length;
    var i;
    var infinitely = 9999999999999999999999999999999999999999;

    for(i = 0; i < infinitely; i++){
        try {
            if (i % count === 0) {
                resetColors((i % count), elements);
            }
            else {
                colorEach((i % count), elements);
            }
        } catch(e) {
            console.log(e);
        }
    }

    function resetColors (i, elements) {
        if (i > 0) { // the changes in here will have occurred on the second loop
            var timer;
            setTimeout(elements.each(function(index, element){
                if(index > 0 && index < 4) { // omit the first element in the list    
                    element.removeClass("bg--green");
                    if(index < 4) { // only the small circles
                        element.addClass("bg--gray");
                    }
                    if(index > 3) { // only the large circles
                        element.addClass("bg--red");
                    }
                }
            }), 3000);
        }
    }

    function colorEach (i, elements)  {
        switch (i) {
            // Small Circles, except the first one
            case 1:
                colorBackground(i, elements, 1);
                break;
            case 2:
                colorBackground(i, elements, 1);
            case 3:
                colorBackground(i, elements, 1);
                break;
            // Large Circles
            case 4:
                colorBackground(i, elements, 0);
                break;
            case 5:
                colorBackground(i, elements, 0);
                break;
            case 6:
                colorBackground(i, elements, 0);
                break;
            case 7:
                colorBackground(i, elements, 0);
                break;
        }
    }

    function colorBackground (i, elements, type) {
        if(type) { // type 1: large circle
            var timer;
            setTimeout(function(i, a){
                console.log("timeout function at colorBackground i: " + i);
                a[i].removeClass("bg--red");
                a[i].addClass("bg--green");
            }, 3000);
        }
        else { // type 0: small circle
            var timer;
            setTimeout(function(i, elements){
                console.log("timeout function at colorBackground i: " + i);
                elements[i].removeClass("bg--gray");
                elements[i].addClass("bg--green");
            }, 3000);
        }
    }
}

尝试利用

.queue（）

（功能循环（elems）{
元素队列（bg），元映射（元素，函数（el，i）{
返回函数（下一步）{
setTimeout（函数（）{
el.style.backgroundColor=“绿色”；
next（）；
}, 1000)
}
})).退出（“bg”）.承诺（“bg”）
.然后（函数（_元素）{
控制台日志（_elems）；
setTimeout（函数（）{
元素
.slice（0,1）.css（“背景色”、“绿色”）
.addBack（）
.切片（1,4）
.css（“背景色”、“灰色”）
.addBack（）
.切片（4）
.css（“背景色”、“红色”）；
周期（_elems）；
}, 3000);
});
}（$（“.circle”）
。小圆圈{
边缘底部：20px；
}
.小圆圈，圆圈{
显示：内联块；
高度：25px；
宽度：25px；
边界半径：25px；
}
.大圆圈，圆圈{
显示：内联块；
高度：75px；
宽度：75px；
边界半径：75px；
背景色：红色；
}
.小圆圈.圆圈：第一个孩子{
背景颜色：绿色；
}
.大圆圈，圆圈{
背景色：红色；
}
.小圆圈。圆圈：非（：第一个孩子）{
背景颜色：灰色；
}
.bg--绿色{
背景颜色：绿色；
}
.bg--灰色{
背景颜色：灰色；
}
如果有点乏味的话，这仅在CSS中是可能的。您需要为每个圆设置新的关键帧动画。每个圆保持灰色，然后在动画中比上一个动画更进一步地变成绿色12.5%（100除以8）。所有动画设置为持续8秒，并在最后重复

下面的示例代码使用标准语法。您可能希望添加供应商前缀以确保旧式支持，但所有主要浏览器都使用这种语法


解决方案：
这种效果完全可以通过CSS关键帧和动画实现

我提供的浏览器支持：
Firefox 5+、IE 10+、Chrome、Safari 4+、Opera 12+


HTML:

<div class="smallCircles">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
</div>
<div class="largeCircles">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
</div>

.smallCircles { 
    margin-bottom: 20px;
}
.smallCircles .circle { 
    height: 25px;
    width: 25px;
}
.largeCircles .circle {
    height: 75px;
    width: 75px;
}
.circle {
    display: inline-block;
    border-radius: 50%;
    background-color: gray;
}

.circle {
    -webkit-animation: 8s infinite;
    -moz-animation: 8s infinite;
    -o-animation: 8s infinite;
    animation: 8s infinite;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: steps(1,end);
    -moz-animation-timing-function: steps(1,end);
    -o-animation-timing-function: steps(1,end);
    animation-timing-function: steps(1,end);
}

.smallCircles > .circle:nth-of-type(1) {
    -webkit-animation-name: state1;
    -moz-animation-name: state1;
    -o-animation-name: state1;
    animation-name: state1;
}
.smallCircles > .circle:nth-of-type(2) {
    -webkit-animation-name: state2;
    -moz-animation-name: state2;
    -o-animation-name: state2;
    animation-name: state2;
}
.smallCircles > .circle:nth-of-type(3) {
    -webkit-animation-name: state3;
    -moz-animation-name: state3;
    -o-animation-name: state3;
    animation-name: state3;
}
.smallCircles > .circle:nth-of-type(4) {
    -webkit-animation-name: state4;
    -moz-animation-name: state4;
    -o-animation-name: state4;
    animation-name: state4;
}
.largeCircles > .circle:nth-of-type(1) {
    -webkit-animation-name: state5;
    -moz-animation-name: state5;
    -o-animation-name: state5;
    animation-name: state5;
}
.largeCircles > .circle:nth-of-type(2) {
    -webkit-animation-name: state6;
    -moz-animation-name: state6;
    -o-animation-name: state6;
    animation-name: state6;
}
.largeCircles > .circle:nth-of-type(3) {
    -webkit-animation-name: state7;
    -moz-animation-name: state7;
    -o-animation-name: state7;
    animation-name: state7;
}
.largeCircles > .circle:nth-of-type(4) {
    -webkit-animation-name: state8;
    -moz-animation-name: state8;
    -o-animation-name: state8;
    animation-name: state8;
}

@-webkit-keyframes state1 {
    0% { background-color: green; }
    100% {background-color: green; }
}
@-moz-keyframes state1 {
    0% { background-color: green; }
    100% { background-color: green; }
}
@-o-keyframes state1 {
    0% { background-color: green; }
    100% { background-color: green; }
}
@keyframes state1 {
    0% { background-color: green; }
    100% { background-color: green; }
}
@-webkit-keyframes state2 {
    12% { background-color: gray; }
    12.5% { background-color: green; }
    100% { background-color: green; }
}
@-moz-keyframes state2 {
    12% { background-color: gray; }
    12.5% { background-color: green; }
    100% { background-color: green; }
}
@-o-keyframes state2 {
    12% { background-color: gray; }
    12.5% { background-color: green; }
    100% { background-color: green; }
}
@keyframes state2 {
    12% { background-color: gray; }
    12.5% { background-color: green; }
    100% { background-color: green; }
}
@-webkit-keyframes state3 {
    24.5% { background-color: gray; }
    25% { background-color: green; }
    100% { background-color: green; }
}
@-moz-keyframes state3 {
    24.5% { background-color: gray; }
    25% { background-color: green; }
    100% { background-color: green; }
}
@-o-keyframes state3 {
    24.5% { background-color: gray; }
    25% { background-color: green; }
    100% { background-color: green; }
}
@keyframes state3 {
    24.5% { background-color: gray; }
    25% { background-color: green; }
    100% { background-color: green; }
}
@-webkit-keyframes state4 {
    37% { background-color: gray; }
    37.5% { background-color: green; }
    100% { background-color: green; }
}
@-moz-keyframes state4 {
    37% { background-color: gray; }
    37.5% { background-color: green; }
    100% { background-color: green; }
}
@-o-keyframes state4 {
    37% { background-color: gray; }
    37.5% { background-color: green; }
    100% { background-color: green; }
}
@keyframes state4 {
    37% { background-color: gray; }
    37.5% { background-color: green; }
    100% { background-color: green; }
}
@-webkit-keyframes state5 {
    49.5% { background-color: gray; }
    50% { background-color: green; }
    100% { background-color: green; }
}
@-moz-keyframes state5 {
    49.5% { background-color: gray; }
    50% { background-color: green; }
    100% { background-color: green; }
}
@-o-keyframes state5 {
    49.5% { background-color: gray; }
    50% { background-color: green; }
    100% { background-color: green; }
}
@keyframes state5 {
    49.5% { background-color: gray; }
    50% { background-color: green; }
    100% { background-color: green; }
}
@-webkit-keyframes state6 {
    62% { background-color: gray; }
    62.5% { background-color: green; }
    100% { background-color: green; }
}
@-moz-keyframes state6 {
    62% { background-color: gray; }
    62.5% { background-color: green; }
    100% { background-color: green; }
}
@-o-keyframes state6 {
    62% { background-color: gray; }
    62.5% { background-color: green; }
    100% { background-color: green; }
}
@keyframes state6 {
    62% { background-color: gray; }
    62.5% { background-color: green; }
    100% { background-color: green; }
}
@-webkit-keyframes state7 {
    74.5% { background-color: gray; }
    75% { background-color: green; }
    100% { background-color: green; }
}
@-moz-keyframes state7 {
    74.5% { background-color: gray; }
    75% { background-color: green; }
    100% { background-color: green; }
}
@-o-keyframes state7 {
    74.5% { background-color: gray; }
    75% { background-color: green; }
    100% { background-color: green; }
}
@keyframes state7 {
    74.5% { background-color: gray; }
    75% { background-color: green; }
    100% { background-color: green; }
}
@-webkit-keyframes state8 {
    87% { background-color: gray; }
    87.5% { background-color: green; }
    100% { background-color: green; }
}
@-moz-keyframes state8 {
    87% { background-color: gray; }
    87.5% { background-color: green; }
    100% { background-color: green; }
}
@-o-keyframes state8 {
    87% { background-color: gray; }
    87.5% { background-color: green; }
    100% { background-color: green; }
}
@keyframes state8 {
    87% { background-color: gray; }
    87.5% { background-color: green; }
    100% { background-color: green; }
}


.smallCircles{
边缘底部：20px；
}
.smallCircles.circle{
高度：25px；
宽度：25px；
}
.大圆圈，圆圈{
高度：75px；
宽度：75px；
}
.圆圈{
显示：内联块；
边界半径：50%；
背景颜色：灰色；
}
.圆圈{
-webkit动画：8s无限；
-moz动画：8s无限；
-o动画：8s无限；
动画：8s无限；
-webkit动画填充模式：正向；
-moz动画填充模式：正向；
-o-动画-填充模式：正向；
动画填充模式：正向；
-webkit动画计时功能：步骤（1，结束）；
-moz动画计时功能：步骤（1，结束）；
-o-动画-定时-功能：步骤（1，结束）；
动画计时功能：步骤（1，结束）；
}
.smallCircles>.circle:n类型（1）{
-webkit动画名称：state1；
-moz动画名称：state1；
-o-animation-name:state1；
动画名称：state1；
}
.smallCircles>.circle:n类型（2）{
-webkit动画名称：state2；
-moz动画名称：state2；
-o-动画名称：state2；
动画名称：state2；
}
.smallCircles>.circle:n类型（3）{
-webkit动画名称：state3；
-moz动画名称：state3；
-o-动画名称：state3；
动画名称：state3；
}
.smallCircles>.circle:n类型（4）{
-webkit动画名称：state4；
-moz动画名称：state4；
-o-动画名称：state4；
动画名称：state4；
}
.largeCircles>.circle:n类型（1）{
-webkit动画名称：state5；
-moz动画名称：state5；
-o-动画名称：state5；
动画名称：state5；
}
.largeCircles>.circle:n类型（2）{
-webkit动画名称：state6；
-moz动画名称：state6；
-o-动画名称：state6；
动画名称：state6；
}
.largeCircles>.circle:n类型（3）{
-webkit动画名称：state7；
-moz动画名称：state7；
-o-动画名称：state7；
动画名称：state7；
}
.largeCircles>.circle:n类型（4）{
-webkit动画名称：state8；
-moz动画名称：state8；
-o-animation-name:state8；
动画名称：state8；
}
@-webkit关键帧状态1{
0%{背景色：绿色；}
100%{背景色：
.smallCircle :nth-child(2) {
    animation: smallCircle-2 1s infinite;
}
.smallCircle :nth-child(3) {
    animation: smallCircle-3 2s infinite;
}
.largeCircle :nth-child(4) {
    animation: smallCircle-1 3s infinite;
}
.largeCircle :nth-child(1) {
    animation: largeCircle-2 4s infinite;
}
.largeCircle :nth-child(2) {
    animation: largeCircle-3 5s infinite;
}
.largeCircle :nth-child(3) {
    animation: largeCircle-4 6s infinite;
}
.smallCircle :nth-child(4) {
    animation: largeCircle-4 7s infinite;
}
@keyframes smallCircle-2 {
    99% { background:gray }
    100% {background:green;}
}
@keyframes smallCircle-3 {
    99% { background:gray }
    100% {background:green;}
}
@keyframes smallCircle-4 {
    99% { background:gray }
    100% {background:green;}
}
@keyframes largeCircle-1 {
    99% { background:gray }
    100% {background:green;}
}
@keyframes largeCircle-2 {
    99% { background:gray }
    100% {background:green;}
}
@keyframes largeCircle-3 {
    99% { background:gray }
    100% {background:green;}
}
@keyframes largeCircle-4 {
    99% { background:gray }
    100% {background:green;}
}

@keyframes a1 {
    0% { background-color: green; }
}
@keyframes a2 {
    12.5% { background-color: green; }
}
@keyframes a3 {
    25% { background-color: green; }
}
@keyframes a4 {
    37.5% { background-color: green; }
}
@keyframes a5 {
    50% { background-color: green; }
}
@keyframes a6 {
    62.5% { background-color: green; }
}
@keyframes a7 {
    75% { background-color: green; }
}
@keyframes a8 {
    87.5% { background-color: green; }
}

.circle {
    animation-duration: 8s;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
    animation-timing-function: steps(1,end)
}

.smallCircles .circle:nth-of-type(1) {
    animation-name: a1;
}

.smallCircles .circle:nth-of-type(2) {
    animation-name: a2;
}

.smallCircles .circle:nth-of-type(3) {
    animation-name: a3;
}

.smallCircles .circle:nth-of-type(4) {
    animation-name: a4;
}

.largeCircles .circle:nth-of-type(1) {
    animation-name: a5;
}

.largeCircles .circle:nth-of-type(2) {
    animation-name: a6;
}

.largeCircles .circle:nth-of-type(3) {
    animation-name: a7;
}

.largeCircles .circle:nth-of-type(4) {
    animation-name: a8;
}

<div class="smallCircles">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
</div>
<div class="largeCircles">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
</div>

.smallCircles { 
    margin-bottom: 20px;
}
.smallCircles .circle { 
    height: 25px;
    width: 25px;
}
.largeCircles .circle {
    height: 75px;
    width: 75px;
}
.circle {
    display: inline-block;
    border-radius: 50%;
    background-color: gray;
}

.circle {
    -webkit-animation: 8s infinite;
    -moz-animation: 8s infinite;
    -o-animation: 8s infinite;
    animation: 8s infinite;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: steps(1,end);
    -moz-animation-timing-function: steps(1,end);
    -o-animation-timing-function: steps(1,end);
    animation-timing-function: steps(1,end);
}

.smallCircles > .circle:nth-of-type(1) {
    -webkit-animation-name: state1;
    -moz-animation-name: state1;
    -o-animation-name: state1;
    animation-name: state1;
}
.smallCircles > .circle:nth-of-type(2) {
    -webkit-animation-name: state2;
    -moz-animation-name: state2;
    -o-animation-name: state2;
    animation-name: state2;
}
.smallCircles > .circle:nth-of-type(3) {
    -webkit-animation-name: state3;
    -moz-animation-name: state3;
    -o-animation-name: state3;
    animation-name: state3;
}
.smallCircles > .circle:nth-of-type(4) {
    -webkit-animation-name: state4;
    -moz-animation-name: state4;
    -o-animation-name: state4;
    animation-name: state4;
}
.largeCircles > .circle:nth-of-type(1) {
    -webkit-animation-name: state5;
    -moz-animation-name: state5;
    -o-animation-name: state5;
    animation-name: state5;
}
.largeCircles > .circle:nth-of-type(2) {
    -webkit-animation-name: state6;
    -moz-animation-name: state6;
    -o-animation-name: state6;
    animation-name: state6;
}
.largeCircles > .circle:nth-of-type(3) {
    -webkit-animation-name: state7;
    -moz-animation-name: state7;
    -o-animation-name: state7;
    animation-name: state7;
}
.largeCircles > .circle:nth-of-type(4) {
    -webkit-animation-name: state8;
    -moz-animation-name: state8;
    -o-animation-name: state8;
    animation-name: state8;
}

@-webkit-keyframes state1 {
    0% { background-color: green; }
    100% {background-color: green; }
}
@-moz-keyframes state1 {
    0% { background-color: green; }
    100% { background-color: green; }
}
@-o-keyframes state1 {
    0% { background-color: green; }
    100% { background-color: green; }
}
@keyframes state1 {
    0% { background-color: green; }
    100% { background-color: green; }
}
@-webkit-keyframes state2 {
    12% { background-color: gray; }
    12.5% { background-color: green; }
    100% { background-color: green; }
}
@-moz-keyframes state2 {
    12% { background-color: gray; }
    12.5% { background-color: green; }
    100% { background-color: green; }
}
@-o-keyframes state2 {
    12% { background-color: gray; }
    12.5% { background-color: green; }
    100% { background-color: green; }
}
@keyframes state2 {
    12% { background-color: gray; }
    12.5% { background-color: green; }
    100% { background-color: green; }
}
@-webkit-keyframes state3 {
    24.5% { background-color: gray; }
    25% { background-color: green; }
    100% { background-color: green; }
}
@-moz-keyframes state3 {
    24.5% { background-color: gray; }
    25% { background-color: green; }
    100% { background-color: green; }
}
@-o-keyframes state3 {
    24.5% { background-color: gray; }
    25% { background-color: green; }
    100% { background-color: green; }
}
@keyframes state3 {
    24.5% { background-color: gray; }
    25% { background-color: green; }
    100% { background-color: green; }
}
@-webkit-keyframes state4 {
    37% { background-color: gray; }
    37.5% { background-color: green; }
    100% { background-color: green; }
}
@-moz-keyframes state4 {
    37% { background-color: gray; }
    37.5% { background-color: green; }
    100% { background-color: green; }
}
@-o-keyframes state4 {
    37% { background-color: gray; }
    37.5% { background-color: green; }
    100% { background-color: green; }
}
@keyframes state4 {
    37% { background-color: gray; }
    37.5% { background-color: green; }
    100% { background-color: green; }
}
@-webkit-keyframes state5 {
    49.5% { background-color: gray; }
    50% { background-color: green; }
    100% { background-color: green; }
}
@-moz-keyframes state5 {
    49.5% { background-color: gray; }
    50% { background-color: green; }
    100% { background-color: green; }
}
@-o-keyframes state5 {
    49.5% { background-color: gray; }
    50% { background-color: green; }
    100% { background-color: green; }
}
@keyframes state5 {
    49.5% { background-color: gray; }
    50% { background-color: green; }
    100% { background-color: green; }
}
@-webkit-keyframes state6 {
    62% { background-color: gray; }
    62.5% { background-color: green; }
    100% { background-color: green; }
}
@-moz-keyframes state6 {
    62% { background-color: gray; }
    62.5% { background-color: green; }
    100% { background-color: green; }
}
@-o-keyframes state6 {
    62% { background-color: gray; }
    62.5% { background-color: green; }
    100% { background-color: green; }
}
@keyframes state6 {
    62% { background-color: gray; }
    62.5% { background-color: green; }
    100% { background-color: green; }
}
@-webkit-keyframes state7 {
    74.5% { background-color: gray; }
    75% { background-color: green; }
    100% { background-color: green; }
}
@-moz-keyframes state7 {
    74.5% { background-color: gray; }
    75% { background-color: green; }
    100% { background-color: green; }
}
@-o-keyframes state7 {
    74.5% { background-color: gray; }
    75% { background-color: green; }
    100% { background-color: green; }
}
@keyframes state7 {
    74.5% { background-color: gray; }
    75% { background-color: green; }
    100% { background-color: green; }
}
@-webkit-keyframes state8 {
    87% { background-color: gray; }
    87.5% { background-color: green; }
    100% { background-color: green; }
}
@-moz-keyframes state8 {
    87% { background-color: gray; }
    87.5% { background-color: green; }
    100% { background-color: green; }
}
@-o-keyframes state8 {
    87% { background-color: gray; }
    87.5% { background-color: green; }
    100% { background-color: green; }
}
@keyframes state8 {
    87% { background-color: gray; }
    87.5% { background-color: green; }
    100% { background-color: green; }
}