Add different animation-delays to 20 divs in CSS

Question

I need to apply different animation-delay values for 20 divs. The CSS I have below works but I wanted to know if there was a more efficient/shorter way of writing this in Pure CSS. The animation-delay needs to decrement by 0.5s for each div.

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