Какое есть свойство с градацией похожее на visibility: hidden

«Какое есть свойство с градацией похожее на visibility: hidden» — вопрос из категории CSS, который задают на 10% собеседований Frontend Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Ответ

opacity: 0 — делает элемент полностью прозрачным, но он остается в DOM и реагирует на события (если не отключено через pointer-events: none).

Пример:

.element {
  opacity: 0; /* Невидим, но занимает место */
  transition: opacity 0.3s; /* Плавное появление/исчезание */
}

Еще варианты:

  • height: 0, width: 0 + overflow: hidden — скрывает элемент, но сохраняет его в потоке.
  • transform: scale(0) — визуально скрывает, сохраняя место.

В отличие от visibility: hidden, opacity поддерживает анимацию.