How to make the buttons appear one after the other?

Question

css

There is some HTML code

<div class="button-group anim">
    <button class="button"></button>
    <button class="button"></button>
    <button class="button"></button>
    <button class="button"></button>
    <button class="button"></button>
    <button class="button"></button>
</div>

It is necessary to make an animation so that the buttons appear by opacity one after the other from top to bottom.

Handicraft way to solve the problem:

.anim .button:nth-child(2) {
  animation: fade 1s ease-in-out;
}
@keyframes fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

The downside of this solution is that you have to do this with each "child", and I need it to be independent of the number of buttons.

Answer 1

Thanks for the replies, but I haven't found an answer yet.
As a result, answering your own question - no, this can only be implemented through JS.

Answer 2

Perhaps the easiest option is to specify the animation-delay value inline in the layout. And hang animation on all .anim .button elements.

<div class="button-group anim">
    <button class="button" style="animation-delay: 0s"></button>
    <button class="button" style="animation-delay: 1s"></button>
    ...
</div>