3

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;
    }
626
  • 1,159
  • 2
  • 16
  • 27
  • Share the animation your are trying to achieve, maybe there is a better way to redo it – Temani Afif Dec 11 '21 at 09:09
  • Something like this https://codepen.io/RedGlove/pen/pmOYqz. I need to rewrite the code in my post in pure CSS if that is possible. – 626 Dec 11 '21 at 09:22
  • 1
    add this requirement into the question because such animation can be done without all the delays – Temani Afif Dec 11 '21 at 09:27

0 Answers0