css - CSS3 遅延で次々とアニメーション化

Question

ここでフィドル-

divscss3への移行がいくつかあります。このトランジションを一度にすべてのアイテムに適用するのではなく、たとえば100ms delay別のアイテムごとに適用することはできますか?

#main div {
    opacity: 0;
    transition: 1s opacity;
}

#main.active div{
    opacity: 1;
}

.activeクラスをに追加すると#main、その子は一度にではなく、次々と不透明度を変更しますか?

私はそれが簡単にできることを知っています

$('.setOfItems').each(function(i){ $(this).delay(100*i).doSth() })

しかし、私はcss3ソリューションだけを探しています。

Answer 1

方法はありますが、完全にはサポートされていません。 keyframesを参照してください。

次に、各要素の異なるクラスを作成する必要があります。