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

Чтобы сделать плавное появление блока CSS, вы можете использовать анимацию или переход (transition).

1. Анимация Создайте ключевые кадры (keyframes), которые задают начальное и конечное состояние элемента, и определите продолжительность анимации. Например:

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.block {
  animation-name: fadeIn;
  animation-duration: 1s;
}

В данном примере, при добавлении класса block к любому элементу, он будет анимирован с помощью анимации fadeIn, которая устанавливает начальное состояние элемента с нулевой прозрачностью (opacity: 0) и конечное состояние с полной прозрачностью (opacity: 1) в течение 1 секунды (animation-duration: 1s).

2. Переход (Transition) Добавьте переходное свойство к элементу, которое задает продолжительность перехода и какое свойство должно быть анимировано. Например:

.block {
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.block.fade-in {
  opacity: 1;
}

Здесь мы первоначально устанавливаем нулевую прозрачность элемента с классом .block. Затем мы добавляем переход до полной прозрачности при добавлении класса .fade-in. Свойство transition задает, что мы хотим анимировать свойство opacity с продолжительностью 1 секунда и задержкой, которая плавно включает и выключает переход (ease-in-out).

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