Delayed Boxes FadeIn-Animation

I have created a fade-in effect of single elements (.boxes > div) when an user scrolls down the website. I check with Javascript if the element just scrolled into the view and then add the class .fadeInUp to add the animation effect.

This is how I accomplish to fade in another element after another element with animation-delay:

.fadeInUp {
    & + .fadeInUp {
        animation-delay: 300ms;
        & + .fadeInUp {
            animation-delay: 600ms;
            & + .fadeInUp {
                animation-delay: 900ms;
                & + .fadeInUp {
                    animation-delay: 1200ms;
                    & + .fadeInUp {
                        animation-delay: 1500ms;
                    }
                }
            }
        }
    }

    opacity: 0;
    animation: fadeInUp 1000ms forwards;
}

However, I want to shorten my SCSS code to select the next sibling class with the same class name, because if I add boxes to the HTML part, I also need to add the animation-delay to the SCSS part.

Question:

Is there an option to shorten this behaviour with native CSS (or SCSS alternatively) without knowing how many boxes will be there? Something like

& + * { ... }

but specific to the class .fadeInUp and also increasing the animation-delay value by 300ms with each next sibling class?

I have created this pen to demonstrate my question and make it more clear:

CodePen: Delayed Boxes FadeIn-Animation