Animasyonlu kapatma için farklı bir CSS animation yazmalısın. İlkinin aksine opacity değeri 1'den 0'a inmeli. İkinci hata ise animasyonun ardından display:none kullanman. Bunu kullandığında animasyon kullanımı gözardı edilip div'in otomatikman anında gizleniyor.

CSS kısmına şunu ekle:

.search-container.passive{animation: popupKapat .5s linear;}

/* Animasyonlu Kapatma */
@-webkit-keyframes popupKapat {from {top:0; opacity: 1;} to {top:0px; opacity:0;}}
@keyframes popupKapat {from {top:0; opacity: 1;} to {top:0px; opacity:0;}}

javascripti ise şu şekilde değiştir:

const searchInput = document.querySelector(".search-icon");
const searchContainer = document.querySelector(".search-container");
const searchCloseBtn = document.querySelector(".search-close-btn");

searchInput.addEventListener("click", () => {
searchContainer.classList.add("active");
searchContainer.classList.remove("passive");
searchCloseBtn.style.display = "block";
});

searchCloseBtn.addEventListener("click", () => {

searchContainer.classList.add("passive");

setTimeout(function(){
searchContainer.classList.remove("active");
searchCloseBtn.style.display = "none";
}, 500)

searchInput.value = "";
});

Örnek çalışan sayfa