<div>Content</div>
<div id="overlay">Overlay</div>
<style>
#overlay{
	display:none;
	position:fixed;
	top:0;
	right:0;
	bottom:0;
	left:0;
	margin:auto;
	background:rgba(255,255,255,.5);
	padding:30px;
	opacity:0;
}
#overlay,#overlay.show{
	transition:opacity ease 1s;
}
#overlay.block{
	display:block;
}
#overlay.show{
	opacity:1;
}
</style>
<script>
document.addEventListener('DOMContentLoaded',function(){
	const overlay=document.getElementById('overlay');
	overlay.classList.add('block');
	setTimeout(()=>overlay.classList.add('show'),0);

	setTimeout(()=>{
		overlay.classList.remove('show');
		setTimeout(()=>overlay.classList.remove('block'),1000);
	},3*1000);
});
</script>