Как сделать поочередное появление блоков?

Чтобы сделать поочередное появление блоков с помощью CSS, можно использовать анимации и псевдоклассы. Существует несколько подходов к реализации данного эффекта, и я расскажу вам о двух наиболее распространенных методах.

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

Вот пример CSS кода для этого метода:

/* Анимация блоков */
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* Каждый блок будет иметь свою анимацию */
.block1 {
  animation: fadeIn 1s ease-out;
}

.block2 {
  animation: fadeIn 1s 0.5s ease-out;
}

.block3 {
  animation: fadeIn 1s 1s ease-out;
}

/* Задержка анимации для каждого блока */
.delay-0 {
  animation-delay: 0.5s;
}

.delay-1 {
  animation-delay: 1s;
}

.delay-2 {
  animation-delay: 1.5s;
}

В данном примере мы создали анимацию с названием "fadeIn", которая будет менять прозрачность блока от 0 до 1. Затем мы создали три класса блоков: "block1", "block2" и "block3", которые будут иметь разные задержки анимации и, следовательно, будут появляться поочередно. Классы "delay-0", "delay-1" и "delay-2" применяются к каждому блоку, чтобы задать задержку анимации.

Второй метод использует псевдокласс :nth-child() для выбора элементов по порядку и применения анимации к каждому из них. Этот метод часто используется, когда количество блоков динамическое и мы не знаем заранее, сколько их будет.

/* Анимация блоков */
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* Применяем анимацию к блокам по порядку */
.container div:nth-child(1) {
  animation: fadeIn 1s ease-out;
}

.container div:nth-child(2) {
  animation: fadeIn 1s 0.5s ease-out;
}

.container div:nth-child(3) {
  animation: fadeIn 1s 1s ease-out;
}

В этом примере мы определили анимацию "fadeIn" так же, как в предыдущем методе. Затем мы использовали псевдокласс :nth-child() для выбора последовательных элементов внутри контейнера с классом "container". Каждый блок получает свою анимацию с заданными задержками.

В обоих методах важно убедиться, что установлено свойство opacity: 0 для блоков, которые вы хотите появиться, чтобы они изначально были невидимыми. Используя данные подходы, вы можете создать эффект поочередного появления блоков, который будет работать во многих современных браузерах.