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

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

• CSS-анимации применимы к свойствам с числовыми значениями
• opacity — поддерживает плавное изменение, например от 0 до 1
• visibility — напрямую не анимируется, однако его можно переключать с задержкой через transition-delay или из JS
• display — не поддерживает прямую анимацию, поскольку это логическое свойство, влияющее на рендеринг и поток элементов
• Для плавного скрытия элемента обычно объединяют opacity и visibility, не используя display в самой анимации
• Значение display изменяют после того, как завершается анимация opacity, чтобы переход оставался плавным
• Практическое правило: анимировать opacity, а visibility и display переключать через JS или CSS-триггеры

Это позволяет создавать плавные переходы без резких изменений в раскладке страницы и её отображении.

Подробный ответ

Основной ответ

Свойство opacity можно непосредственно включать в CSS-переходы и анимации: оно относится к числовым значениям и плавно изменяется в диапазоне от 0 до 1. В то же время visibility и display напрямую не анимируются, поскольку являются дискретными свойствами — булевыми или перечисляемыми — без промежуточных состояний.

Ключевые моменты

• Opacity поддерживается всеми современными браузерами в CSS transitions и keyframes. Например, можно использовать transition: opacity 0.5s ease;. Изменение opacity регулирует прозрачность элемента и позволяет реализовать плавное появление или исчезновение.
• Visibility переключается мгновенно между состояниями visible и hidden. Поскольку промежуточных значений у свойства нет, его нельзя анимировать. На практике visibility часто комбинируют с opacity, чтобы скрыть элемент после завершения перехода прозрачности.
• Display не анимируется вообще: переход между значениями (none ↔ block, inline и т.п.) меняет поток и структуру документа, поэтому выполнить такое изменение плавно технически невозможно.
• Для визуального эффекта появления и скрытия обычно используют opacity вместе с управлением visibility или display через JavaScript. Например, сначала запускают анимацию opacity, а после её завершения устанавливают display: none.

Практический контекст

Распространённый паттерн для появления элемента выглядит так: opacity изменяют с 0 до 1, а visibility в начале перехода переключают с hidden на visible. При скрытии сначала уменьшают opacity, а в событии transitionend устанавливают display: none или visibility: hidden, чтобы запретить взаимодействие и освободить место. Этот подход используют в модальных окнах, выпадающих меню и других интерактивных компонентах, например в React 18 с CSS TransitionGroup или с JS-аниматорами вроде GSAP.