多くのCSSアニメーションnth-of-typeセレクタを1つに結合する方法は？

Question

<hr> html要素の大きなセットがあると、ページの読み込み時に色が次々と変化する必要があります。現時点ではアニメーションは機能しますが、htmlで新たに追加された各<hr>要素のために、CSSで繰り返し手作業を大量に必要とします。遷移間隔は次の<hr>行ごとに同じであるため、これをCSSでよりエレガントで短く記述できますか？

目標は、CSSを毎回変更することなく、新たな時間要素を追加することができることです。

は再び：この質問だけではCSSで（もっとエレガントに）これを行う方法についてですか？少ないか、手作業なしで、あなたのCSSを生成することができSCSSを使用

nav hr{ 
 
    border-top: 3px solid #BBB; 
 
    border-bottom: 0px; 
 
    margin: 10px 0; 
 
} 
 
\t 
 
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

（JS/SASS/SCSSなし）。しかしそれはまだエレガントではありません。

たぶん、いくつかのCSSの天才は私にはない何かを知っているが、私はいくつかの最小限のJavaScriptの周りにどのような方法が表示されません：あなたはforwardsを使用することができますhr滞在ブルーを作るために

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

をアニメーション塗りつぶしモードとして使用したり、各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; 
    } 
}