Можно ли анимировать свойства opacity, visibility и display?

Question

opacity и visibility можно анимировать с помощью CSS-переходов и анимаций. display нельзя анимировать напрямую, но можно комбинировать с другими свойствами для создания эффектов появления/исчезновения.

YeaHub · Accepted Answer

Возможности анимации:opacity:Отлично анимируется с помощью transition и animationПозволяет создавать плавные эффекты fadingvisibility:Можно анимировать с задержкамиЧасто используется в комбинации с opacitydisplay:Не поддерживает анимациюДля анимированного скрытия/показа нужно использовать другие подходыПример анимации opacity:.element {
  opacity: 1;
  transition: opacity 0.3s ease;
}

.element.hidden {
  opacity: 0;
}Комбинированный подход для плавного скрытия:.element {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.element.hidden {
  opacity: 0;
  visibility: hidden;
}Обходное решение для display:Используйте JavaScript для изменения display после завершения анимации opacity.