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

Существует множество способов сделать анимацию появления элемента с помощью CSS. Ниже приведен пример простой анимации появления элемента с использованием свойства opacity и transition.

HTML:

<div class="box">Элемент</div>

CSS:

.box {
  opacity: 0; /* устанавливаем начальное значение прозрачности */
  transition: opacity 1s; /* добавляем свойство transition на изменение прозрачности свойства элемента за 1 секунду */
}

.box.show {
  opacity: 1; /* устанавливаем конечное значение прозрачности */
}

JavaScript:

const box = document.querySelector('.box');

// Добавляем класс 'show' на элемент, когда он появляется на странице
box.classList.add('show');

В данном примере, при загрузке страницы элемент с классом .box будет иметь значение прозрачности 0, так как установлено свойство opacity: 0;. При добавлении класса .show на элемент с помощью JavaScript он начнет анимироваться, так как установлено свойство transition: opacity 1s;. Свойство transition позволяет определить, какие свойства элемента будут изменяться во время анимации и за какое время. В данном примере мы определили, что свойство opacity будет изменяться за 1 секунду. При добавлении класса .show на элемент, значение свойства opacity будет изменяться с 0 на 1, что приведет к плавному появлению элемента.