創建一個複製賽車倒計時的CSS動畫

Question

我想創建一個簡單的動畫，它將每個>符號視爲跑道或停車燈。 AKA我想要>（紅色）..（黃色）..>（綠色），其中..代表0.5秒之間。我可以做這個CSS3嗎？如果不是我怎麼能這樣做。任何幫助讚賞。

<p id="pipes"> >>> </p> 

#pipes:hover{ 

} 

Answer 1

儘管這得到了低估，我認爲這將是一個有趣的練習。特別要注意過渡延遲。

<ul class="pipes"> 
    <li> > </li> 
    <li> > </li> 
    <li> > </li> 
</ul> 

.pipes { 
    list-style: none; 
    margin: 0px; 
    padding: 0px; 
} 

.pipes li { 
    margin: 0px; 
    padding: 0px; 
    display: inline-block; 
    transition: color .5s ease; 
} 


.pipes:hover li:nth-of-type(1) { 
    color: red; 
    transition-delay: .5s; 
} 

.pipes:hover li:nth-of-type(2) { 
    color: yellow; 
    transition-delay: 1s; 
} 

.pipes:hover li:nth-of-type(3) { 
    color: green; 
    transition-delay: 1.5s; 
} 

這裏的小提琴：http://jsfiddle.net/06ywu8nt/