Css-анимация, каждый дочерний элемент исчезает по одному, без javascript ⇐ CSS

[Anonymous]

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

Я не знаю, появится ли это, поскольку я еще не очень хорошо знаком с Google Диском, однако это предварительный просмотр того, чего я пытаюсь достичь. Пример

Мне нужно, чтобы это работало для 9–10 элементов, однако, чтобы упростить это, я написал тестовый код и работал над ним в codepen. Я также перенес это на jsfiddle, так как заметил, что многие люди используют его вместо этого. Вот ссылка jsfiddle

тестовый код:

.block_group { поле: 20 пикселей; дисплей: гибкий; гибкое направление: столбец; оправдание-содержание: пространство между; разрыв: 10 пикселей; анимация: линейное затухание 3 с; .блоки { цвет фона: #000; ширина: 80 пикселей; высота: 80 пикселей; анимация: слайд 3 с замедлением 1000 мс; } } @keyframes слайд { 0% { преобразование: TranslateY (10 пикселей); поле сверху: 15 пикселей; } 100% { преобразование: TranslateY (0 пикселей); поле-верх: 0 пикселей; } } @keyframes исчезают { 50% { непрозрачность: 0; } 100% { непрозрачность: 1; } } Я попробовал создать тег для каждого элемента, а затем задать каждому из них задержку, сделать так, чтобы родительский элемент имел анимацию слайда, а дочерние элементы имели анимацию затухания с задержкой для каждого, и дал каждому второй тег, а затем просто добавил задержка для каждого второго тега.

Мы не используем Java для этого проекта, поэтому я знаю, что должен быть способ сделать это без него, я просто пытаюсь это понять.

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