彼らの位置によってプロパティの値を増やすためにCSSを正規表現する方法はありますか？ - css、css3、css-animations、keyframe

私はWebを準備しています @keyframe - アニメーション。現在望ましい効果を得るために、私は以下のコードを持っています...

index.htm

<article>
<div>Section 1</div>
<div>Section 2</div>
<div>Section 3</div>
<div>Section 4</div>
...
</article>

style.css

article {
...
}
article > div {
background-color: lightblue;
display: block;
height: 50px;
width: 100%;
/**/
animation-name: animation-example;
animation-duration: 0.5s;
animation-iteration-count: 1;
}
article > div:nth-of-type(1) {
animation-delay: 0.0s;
}
article > div:nth-of-type(2) {
animation-delay: 0.2s;
}
article > div:nth-of-type(3) {
animation-delay: 0.4s;
}
article > div:nth-of-type(4) {
animation-delay: 0.8s;
}
...

ご覧のとおり、それぞれ <div></div> nodeのアニメーションは同じですが、遅延は異なりますが、0.2秒増加します。

質問は、 純粋なCSSで、それをそこに置かれたすべてのアイテムのためにそれをそれぞれのために設定する必要なしに動作させるためにどうにかして「正規表現それ」をすることは可能ですか？

純粋なCSSでは不可能であれば、SASS、LESSなどのCSSメタ言語でこれを実現することは可能ですか？

そうでなければ、これを得るための最善の方法は何でしょうか？ （JavaScript、PHPなど）

前もって感謝します。

EDIT：私は自分のニーズに最も近い質問であるLESSの質問を選びました。と言った、私はおそらくのために行きます @Raymond Nijlandの答え そしてPHPを使用してこれらの特別なCSS変数を設定します。

回答：

純粋なCSSでは不可能ですが、再帰ミックスインを使用してLESSで実行できます。

.generate-delays(10); // 10 would be your maximum number of items
// - set higher if needed

.generate-delays(@n, @i: 1) when (@i =< @n) {
article>div:nth-of-type(@{i}) {
animation-delay: ((@i - 1) * 0.2s);
}
.generate-delays(@n, (@i + 1));
}