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

Возможности анимации:

• opacity:

  • Отлично анимируется с помощью transition и animation

  • Позволяет создавать плавные эффекты fading

• visibility:

  • Можно анимировать с задержками

  • Часто используется в комбинации с opacity

• display:

  • Не поддерживает анимацию

  • Для анимированного скрытия/показа нужно использовать другие подходы

Пример анимации 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.