如何將許多CSS動畫n型選擇器組合成一個？

Question

給定一大堆<hr> html元素，這些元素在頁面加載時應該一次又一次地改變顏色。 目前，該動畫可以工作，但是對於HTML中每個相應的新添加的<hr>元素，CSS中都需要大量重復的體力勞動。 由於每個下一條<hr>行的過渡間隔都相同，因此可以在CSS中用更優雅，更短的方式編寫過渡間隔嗎？

目標是能夠添加新的hr元素， 而無需每次都更改CSS。

再說一次：這個問題是關於如何僅在CSS中做到這一點（更優雅）？ （沒有js / sass / scss）

 nav hr{ border-top: 3px solid #BBB; border-bottom: 0px; margin: 10px 0; } nav hr:nth-of-type(01){animation: .5s ease 0.0s 1 gogo} nav hr:nth-of-type(02){animation: .5s ease 0.1s 1 gogo} nav hr:nth-of-type(03){animation: .5s ease 0.2s 1 gogo} nav hr:nth-of-type(04){animation: .5s ease 0.3s 1 gogo} nav hr:nth-of-type(05){animation: .5s ease 0.4s 1 gogo} nav hr:nth-of-type(06){animation: .5s ease 0.5s 1 gogo} nav hr:nth-of-type(07){animation: .5s ease 0.6s 1 gogo} nav hr:nth-of-type(08){animation: .5s ease 0.7s 1 gogo} nav hr:nth-of-type(09){animation: .5s ease 0.8s 1 gogo} nav hr:nth-of-type(10){animation: .5s ease 0.9s 1 gogo} nav hr:nth-of-type(11){animation: .5s ease 1.0s 1 gogo} nav hr:nth-of-type(12){animation: .5s ease 1.1s 1 gogo} /* Boy this takes a lot of time for every new <hr> added in the html */ @keyframes gogo { 0% {border-top-color: #DDD} 100% {border-top-color: #00F} } 

 <nav> <hr> <hr> <hr> <hr> <hr> <hr> <hr> <hr> <hr> <hr> <hr> <hr> <hr> <hr> <hr> <hr> <hr> </nav> 

JSFiddle演示

Answer 1

使用less或scss，無需人工即可生成CSS。 但這還遠非優雅。

也許有些CSS天才知道我不了解的東西，但是我看不到一些最小的JavaScript：

 var hrs = document.getElementsByTagName('hr'); for (var c = 0; c < hrs.length; c++) { hrs[c].style.animation = ".5s ease " + (c * 0.1) + "s 1 forwards gogo"; } 

 nav hr { border-top: 3px solid #BBB; border-bottom: 0px; margin: 10px 0; } @keyframes gogo { 0% { border-top-color: #DDD } 100% { border-top-color: #00F } } 

 <nav> <hr> <hr> <hr> <hr> <hr> <hr> <hr> <hr> <hr> <hr> <hr> <hr> <hr> <hr> <hr> <hr> <hr> </nav> 

Answer 2

要使hr保持藍色，您可以將前forwards用作動畫填充模式，並為需要scs的每個div動態增加延遲時間。 DEMO

$delay: 0.0s;

@for $i from 1 through  9 {
  hr:nth-child($i) {
    $delay = $delay + 0.1s;
    animation: .5s ease $delay 1 forwards  gogo;
  }
}