<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>
