css - 在 CSS 中为 20 个 div 添加不同的动画延迟

Question

我需要animation-delay为 20 个 div 应用不同的值。我在下面的 CSS 可以工作，但我想知道是否有更有效/更短的方式在Pure CSS中编写它。每个animation-delaydiv 需要递减 0.5s。

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