css - CSS で 20 div に異なるアニメーション遅延を追加する

Question

20 divに異なるanimation-delay値を適用する必要があります。私が以下に持っている CSS は機能しますが、 Pure CSSでこれを書くためのより効率的/短い方法があるかどうか知りたいと思いました。animation-delaydiv ごとに 0.5 秒ずつ減分する必要があります。

    .triangle-1 {
        animation-delay: 0s;
    }
    .triangle-2 {
        animation-delay: -0.5s;
    }
    .triangle-3 {
        animation-delay: -1s;
    }
    .triangle-4 {
        animation-delay: -1.5s;
    }
    .triangle-5 {
        animation-delay: -2s;
    }
    .triangle-6 {
        animation-delay: -2.5s;
    }
    .triangle-7 {
        animation-delay: -3s;
    }
    .triangle-8 {
        animation-delay: -3.5s;
    }
    .triangle-9 {
        animation-delay: -4s;
    }
    .triangle-10 {
        animation-delay: -4.5s;
    }
    .triangle-11 {
        animation-delay: -5s;
    }
    .triangle-12 {
        animation-delay: -5.5s;
    }
    .triangle-13 {
        animation-delay: -6s;
    }
    .triangle-14 {
        animation-delay: -6.5s;
    }
    .triangle-15 {
        animation-delay: -7s;
    }
    .triangle-16 {
        animation-delay: -7.5s;
    }
    .triangle-17 {
        animation-delay: -8s;
    }
    .triangle-18 {
        animation-delay: -8.5s;
    }
    .triangle-19 {
        animation-delay: -9s;
    }
    .triangle-20 {
        animation-delay: -9.5s;
    }