Html 把闪光灯按顺序调好

我正在尝试让div一个接一个地以彩色闪烁，只使用HTML和CSS。我已经到了它们闪烁的地步，但是我不能让它们以我想要的方式来做。我在想骑士车的红灯。任何帮助都很好

编辑：谢谢，我在发帖几分钟后就知道了

我的代码：

HTML

---

使用延迟，这里是一个关于关键帧动画的好帖子

---

请在此处添加您的代码…否则它将脱离主题并关闭。我在发布后几分钟就发现了，您已经有了答案？是的，我找到了答案，然后请将其标记为版主注意，以请求删除，无论出于何种原因，我无法，它不会在文本区域中输入…我知道现在你终于添加了代码，你已经有延迟了。忽略我的上述评论。不是我！但是你应该发布一个链接描述的摘要，以防万一将来链接会失败。顺便说一句，我没有否决投票，但是谢谢，我想你回答的时候已经知道了。

<div id="d1" class="div"></div>
<div id="d2" class="div"></div>
<div id="d3" class="div"></div>
<div id="d4" class="div"></div>
<div id="d5" class="div"></div>
<div id="d6" class="div"></div>
<div id="d7" class="div"></div>
<div id="d8" class="div"></div>

@charset "utf-8";
/* CSS Document */

@-webkit-keyframes smooth {
    0% { background: #000000;}
    70% { background: #000000;}
    71% { background: #ff0000;}
    83% { background: #f00000;}
    86% { background: #e00000;}
    89% { background: #a00000;}
    92% { background: #900000;}
    95% { background: #600000;}
    97% { background: #400000;}
    99% { background: #200000;}
    100% { background: #000000;}
}
@-o-keyframes smooth {
    0% { background: #000000;}
    70% { background: #000000;}
    71% { background: #ff0000;}
    83% { background: #f00000;}
    86% { background: #e00000;}
    89% { background: #a00000;}
    92% { background: #900000;}
    95% { background: #600000;}
    97% { background: #400000;}
    99% { background: #200000;}
    100% { background: #000000;}
}
@-moz-keyframes smooth
{
    0% { background: #000000;}
    70% { background: #000000;}
    71% { background: #ff0000;}
    83% { background: #f00000;}
    86% { background: #e00000;}
    89% { background: #a00000;}
    92% { background: #900000;}
    95% { background: #600000;}
    97% { background: #400000;}
    99% { background: #200000;}
    100% { background: #000000;}
}
@keyframes smooth {
    0% { background: #000000;}
    70% { background: #000000;}
    71% { background: #ff0000;}
    83% { background: #f00000;}
    86% { background: #e00000;}
    89% { background: #a00000;}
    92% { background: #900000;}
    95% { background: #600000;}
    97% { background: #400000;}
    99% { background: #200000;}
    100% { background: #000000;}
}

body
{
    background:dark-grey;
    height:100%;
}

#d1
{
    animation-delay:0s;
    -moz-animation-delay:0s;
    -o-animation-delay:0s;
    -webkit-animation-delay:0s; 
}

#d2
{
    animation-delay:0.2s;
    -moz-animation-delay:0.2s;
    -o-animation-delay:0.2s;
    -webkit-animation-delay:0.2s;

}

#d3
{
    animation-delay:0.4s;
    -moz-animation-delay:0.4s;
    -o-animation-delay:0.4s;
    -webkit-animation-delay:0.4s;

}

#d4
{
    animation-delay:0.6s;
    -moz-animation-delay:0.6s;
    -o-animation-delay:0.6s;
    -webkit-animation-delay:0.6s;

}

#d5
{
    animation-delay:0.8s;
    -moz-animation-delay:0.8s;
    -o-animation-delay:0.8s;
    -webkit-animation-delay:0.8s;

}



.div
{
    animation:ease-in smooth 1s infinite;
    -moz-animation:ease-in smooth 1s infinite;
    -o-animation:ease-in smooth 1s infinite;
    -webkit-animation:ease-in smooth 1s infinite;

    width:11.5%;
    height:10vh;

    background:black;

    display:inline-block;
}