Divs, которые вспыхивают в порядке

Question

Я пытаюсь сделать DIVs в цвете один за другим, используя только HTML и CSS. Я дошел до того, что они вспыхивают, но я не мог заставить их делать это так, как я хотел. Я думал о красных огнях автомобиля Knight Rider. Любая помощь будет приятной.

Edit: Спасибо, я понял это только через несколько минут после размещения

Мой код:

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/