How to make a background blur effect that gradually disappears when closing a pop-up, and similarly a smooth exit animation for said pop-up?

(Premise: I've been learning how to code for two months by myself, I'm a beginner so I need very straight-forward, "fool-proof" answers, possibly with clear examples.
Also forgive me if the question is unclear, English is not my native language)

So by far I managed to create a pop-up box that can be closed either by clicking on a button inside it or by clicking outside the box, creating a blur effect on the background when the box is open.

I want to make it so that when closing the pop-up the background gradually loses the blur, but I haven't been able to achieve that kind of effect: when I close it, the background abruptly returns to its original state, it's not smooth at all.
I'd also like to apply the same smooth transition principle to the entry and exit of the box: so far the fade-in applies only when I open the box, but when I close it, it returns to its original state without fading.

This is the HTML with Javascript so far:

<div id="backgroundimage"></div>
                <header>
                    <h1>Title</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                    <nav class="navbar">
                        <ul> 
                            <li> <a href="#"> Link one </a></li>
                            <li> <a href="#"> Link two </a></li>
                            <li> <a href="#"> Link three </a></li>
                            <li> <a href="#"> Link four </a></li>
                            <li> <a href="#" onclick="openPopup()" value="open"/> Open pop-up </a></li>
                        </ul>
                    </nav>
                </header>

<div id="popupBox">
                    <div class="popupContent">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus aliquam consequat viverra.  
                        Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 
                        Donec eleifend nisi et justo rutrum sagittis. 
                        Integer velit dolor, finibus a turpis sed, pulvinar feugiat nulla.  </p>
                    <button class="closebutton" onclick="closePopup()" value="close"/> Close </button>
                    </div>
                </div>

<script>
                    function openPopup() {
                        document.getElementById("popupBox").style.display = "block";
                    }

                    function closePopup() {
                        document.getElementById("popupBox").style.display = "none";
                    }

                    // When the user clicks anywhere outside of the modal, close it
                    window.onclick = function (event) {
                        var modal = document.getElementById('popupBox');
                       if (event.target == modal) {
                            closePopup();
                        } 
                    }
    </script>

This is the CSS

#popupBox {
  display: none; 
  z-index: 1; 
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin:0;
  width: 100%;
  height: 100%;
  overflow: auto;
  animation: fadepopup 0.6s ease 0s 1 normal forwards;
  backdrop-filter: blur(5px);
}             

.popupContent {
  margin: auto;
  background-color: #fff;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 50px;
  outline: 0;
  width: 700px;
  height: 400px;
} 


@keyframes fadepopup {
	0% {opacity: 0;}

	100% {opacity: 1;}
}

I'm sure I'm doing something wrong somewhere, but I can't figure out how to achieve all the above (it's already a miracle to me that I was able to get the opening and closing of the box to work by both pressing the a button and clicking out of the box itself).

Thanks in advance to anyone who'll try to help with this.

In the style, add one more keyframe

@keyframes fadeout {
	0% {
		opacity: 1;
	}
    100% {
		opacity: 0;
	}
}

In the script, do a little change for two functions.

openPopup()

function openPopup() {
	const box = document.getElementById('popupBox')
	box.style.animationName = 'fadepopup';
	document.getElementById('popupBox').style.display = 'block'
}

closePopup()

function closePopup() {
	const box = document.getElementById('popupBox')
	box.style.animationName = 'fadeout';
	setTimeout(() => {
		box.style.display = 'none'
	}, 600)
}

600 is equal to 0.6s