Как сделать выезжающий блок css

Для создания выезжающего блока в 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 для создания своего собственного выезжающего блока.