如何将多个CSS动画类型的nth选择器组合成一个？

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 Demo

Answer 1

使用less或scss，您可以在没有手工劳动的情况下生成css。但它仍然远非优雅。

也许一些CSS天才知道我不知道的事情，但我没有看到任何关于一些最小的JavaScript的方法：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

要使hr保持蓝色，您可以使用forwards作为动画填充模式，并动态增加您需要scss的每个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;
  }
}