Анимировать свойство display с помощью CSS-анимаций невозможно, так как у него нет цифрового диапазона — есть бинарные состояния none, block или другие значения. 1

Однако есть несколько обходных путей:

• Использовать opacity вместе со свойством размера, например height или width. 1 В таком случае свойство размера используется, чтобы эффективно удалить элемент из DOM. 1 Для этого подходит свойство transition-delay. 1
• Использовать ключевые кадры (правило @keyframes). 1 Оно позволяет создавать анимации, контролируя промежуточные шаги анимации. 1 В этом случае нужно дождаться, пока завершатся все остальные эффекты, и потом переключать состояние display. 1
• Использовать оба свойства opacity и display. 4 Для достижения плавного эффекта перехода нужно использовать оба свойства. 4 В начале для класса .element устанавливается прозрачность 0, а для display — none, а затем применяется анимация входа/выхода за 0,6 секунды. 4 После этого класс .element меняет прозрачность на 1 и значение display на block, делая элемент видимым. 4