按顺序闪烁的 div

Question

我正在尝试使 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>

CSS

@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;
}

Answer 1

使用延迟，这里有一篇关于关键帧动画的好帖子。

http://css-tricks.com/snippets/css/keyframe-animation-syntax/