Свойство display не анимируется, но ты можешь порабоать со свойством visibility + opacity. Тебе это подойдет.
Если тебе заранее известнs размеры, то можно использовать ее. Если же нет. то, заменить ее на вариант анимации 2. Второй более универсальный. Свойство visibility сделает его невосприимчивым к событиям, но оставит геометрию, а позиционипрование выбьет из потока. Это если не заморачиваться.
div {
width: 200px;
height: 200px;
display: inline-flex;
justify-content: center;
align-items: center;
}
.first {
background-color: tomato;
animation: fade1 1s 2s forwards;
}
.second {
background-color: aqua;
animation: fade2 1s 2s forwards;
}
@keyframes fade1 {
0% {
opacity: 1;
}
99% {
opacity: 0;
height: 200px;
width: 200px;
}
100% {
opacity: 0;
height: 0;
width: 0;
}
}
@keyframes fade2 {
0% {
opacity: 1;
visibility: visible;
}
99% {
opacity: 0;
visibility: hidden;
position: relative;
}
100% {
opacity: 0;
position: fixed;
}
}
<div class="first">Hide me with height</div>
<div class="second">Hide me with visibility</div>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum dolorum voluptate laboriosam enim sed blanditiis quam adipisci, ab numquam asperiores vel? Dolorem voluptas fugit vero, ipsa ea maiores ad. Nobis!</p>
animation