Как сделать анимацию появление кнопок одну за другой?

Question

[NakedSnake27]

Есть некий HTML код

<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>

Необходимо сделать анимацию, чтобы кнопки появлялись путём opacity одна за другой сверху-вниз.

Кустарный способ решения проблемы:

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

Минус этого решения, что надо делать это с каждым "ребёнком", а мне нужно, чтобы он не зависел от кол-во кнопок.

Comments

[Антон Литвиненко]

Запустите цикл по кнопкам и на каждой итерации прибавляйте к animation-delay немного времени, раздаете их кнопкам

[NakedSnake27]

Антон Литвиненко, А как это организовать?

[Антон Литвиненко]

NakedSnake27, джаваскриптом раздать инлайн стиль, как в ответе. Но может есть смысл написать как у вас цсс скажем для 30 кнопок или сколько их там может быть максимум

Answer 1

[NakedSnake27]

Спасибо за ответы, но ответа так и не нашёл.
В итоге отвечая на свой вопрос - нет, такое можно реализовать только через JS.

Answer 2

[inzeppelin]

Пожалуй, самый простой вариант: указать значение animation-delay инлайном в верстке. А анимацию повесить на все элементы .anim .button.

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

Comments

[Ankhena]

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

.button {
  ...
  animation-delay: var(--delay);
  ..
}

[NakedSnake27]

Как-то кустарно править каждый раз инлайны при изменении кол-во кнопок

[Ankhena]

NakedSnake27, никто же не мешает раздать --delay на js.