Вы можете использовать анимацию и ключевые кадры CSS для создания эффекта появления блоков один за другим. Вот пример кода, который показывает, как это можно сделать:
HTML:
```html
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
```
CSS:
```css
.block {
width: 100px;
height: 100px;
background-color: red;
opacity: 0;
animation: fade 1s ease-in-out forwards;
}
@keyframes fade {
0% {
opacity: 0; /* блок полностью прозрачен */
}
50% {
opacity: 1; /* блок полностью видим */
}
100% {
opacity: 0; /* блок снова полностью прозрачен */
}
}
.block:nth-child(1) {
animation-delay: 0s; /* первый блок должен появиться сразу */
}
.block:nth-child(2) {
animation-delay: 1s; /* второй блок появляется через 1 секунду после начала анимации */
}
.block:nth-child(3) {
animation-delay: 2s; /* третий блок появляется через 2 секунды после начала анимации */
}
```
В этом примере добавляется класс `.block` ко всем блокам, которые вы хотите отображать поочередно. Затем используется анимация `fade`, которая устанавливает блоки полностью прозрачными на 0% и 100% кадрах, а на 50% кадре - полностью видимыми. Вы также можете настроить продолжительность и тип анимации, изменяя значения `1s` и `ease-in-out`.
Каждому блоку присваивается отдельный `animation-delay`, чтобы определить, когда он должен появиться. В этом примере первый блок начинает анимацию с задержкой в 0 секунд, второй - через 1 секунду и третий - через 2 секунды от начала анимации.
Вы также можете настроить задержку между блоками, изменяя значения `1s`, `2s` и так далее в свойствах `animation-delay`.
Надеюсь, это поможет вам создать эффект появления блоков один за другим!