Давайте поговорим о добавлении анимации плавного появления элемента с помощью CSS-свойства transition.

CSS-переходы позволяют анимировать изменения свойств. Вы задаёте свойство для анимации и определяете способ анимации. Когда свойство изменяется, браузер самостоятельно обработает это изменение и отрисует анимацию.

🚫 Однако, если попытаться анимировать свойство display, например:

.animated {
  transition: display 3s;
}

Вы обнаружите, что это не работает. Почему? Дело в том, что не все CSS-свойства можно анимировать. Свойство должно поддерживать интерполяцию своего значения, другими словами иметь диапазон промежуточных значений между двумя состояниями.

Свойство display не анимируется, потому что между display: block; и display: none; нет промежуточных значений. Однако opacity, изменяющееся от 0 до 1, допускает промежуточные значения (например, 0.1, 0.2 и так далее) и отлично подходит для плавных переходов.

💡 Таким образом мы можем переписать наш пример и использовать opacity для плавного появления или исчезновения элемента:

.animated {
  transition: opacity 3s;
  opacity: 1;
}
.animated.hide {
  opacity: 0;
}

🔗 Детальнее про CSS-переходы и анимируемые свойства можно прочитать на MDN:
- Использование CSS-переходов
- Анимируемые CSS-свойства