В чем разница между Opacity и Visibility

opacity и visibility управляют видимостью элемента, но по-разному:

• Opacity (opacity: 0) делает элемент прозрачным, но он остаётся в DOM, реагирует на события (если не запрещено) и занимает место в вёрстке. Анимация opacity плавная.

.element {
  opacity: 0; /* Полностью прозрачен, но кликабелен */
  transition: opacity 0.3s; /* Плавное исчезновение */
}

• Visibility (visibility: hidden) скрывает элемент, но он также остаётся в DOM, НЕ реагирует на события и занимает место. Анимации нет (только переключение между visible/hidden).

.element {
  visibility: hidden; /* Скрыт, не кликабелен, но место сохраняется */
}

Ключевое отличие: opacity можно анимировать, а visibility — нет. Также visibility: hidden полностью отключает взаимодействие с элементом.