Для создания выезжающего блока в CSS можно использовать анимацию с задержкой. Для начала создайте контейнер, в котором будет находится ваш блок:
<div class="container">
<div class="box">
<p>Какой-то текст</p>
</div>
</div>Добавьте стили, чтобы скрыть блок с помощью transform: translateX() и задержкой анимации с помощью animation-delay:
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.box {
display: flex;
justify-content: center;
align-items: center;
width: 200px;
height: 200px;
background-color: gray;
color: white;
transform: translateX(-200px);
animation: slide 1s forwards;
animation-delay: 1s;
}
@keyframes slide {
to {
transform: translateX(0);
}
}В этом примере мы:
- Создали контейнер с помощью
display: flexдля центрирования блока по вертикали и горизонтали. - Установили ширину, высоту и цвет нашего блока.
- Скрыли блок с помощью
transform: translateX(-200px), который передвигает блок на-200pxвлево. - Добавили анимацию
slideс продолжительностью1s, которая передвигает блок на0с помощьюtransform(свойствоforwardsсохраняет последнее значение в анимации). - Задали задержку
animation-delayдля смещения блока после1s. - Создали анимацию
slide, которая передвигает блок на0с помощью ключевого кадраto.
Результатом будет выезжающий блок, который появится через секунду после загрузки страницы. Попробуйте изменить задержку, продолжительность анимации и значения transform для создания своего собственного выезжающего блока.
