How can I make my popup appear smoothly after 5 seconds?

Question

The popup shall appear and cover the full screen after 5 seconds smoothly using the CSS3 transition property and opacity, however it appears all at once.

JSFiddle: https://jsfiddle.net/dnvk87xL/

 var element = document.getElementById("popup"); var t=setTimeout(openPopUp,5000); function openPopUp() { element = document.getElementById("popup"); element.style.display = "block"; element.style.opacity = "1"; } 

 #popup{ position: fixed; height:100%; background-color: green; display: none; opacity: 0; -webkit-transition: opacity 0.7s; transition: opacity 0.7s; } 

 <div> <div id="popup"> I'm gonna appear smoothly after 5 seconds </div> <p> Website content </p> </div> 

Answer 1

"Display" is not animatable CSS property. Instead, try using "Visibility".

 var element = document.getElementById("popup"); var t=setTimeout(openPopUp,5000); function openPopUp() { element = document.getElementById("popup"); element.style.visibility = "visible"; element.style.opacity = "1"; } 

 #popup{ position: fixed; height:100%; background-color: green; display: block; visibility: hidden; opacity: 0; -webkit-transition: opacity 0.7s; transition: opacity 0.7s; } 

 <div> <div id="popup"> I'm gonna appear smoothly after 5 seconds </div> <p> Website content </p> </div> 

Answer 2

Why don't you set display: block; from the beggining? Add a z-index to move it to the background too and change it after. Check it out:

 var element = document.getElementById("popup"); var t=setTimeout(openPopUp,5000); function openPopUp() { element = document.getElementById("popup"); element.style.opacity = "1"; element.style.zIndex = "1"; } 

 #popup{ position: fixed; height:100%; background-color: green; display: block; opacity: 0; -webkit-transition: opacity 0.7s; transition: opacity 0.7s; z-index:-1; } 

 <div> <div id="popup"> I'm gonna appear smoothly after 5 seconds </div> <p> Website content </p> </div> 

Answer 3

You can use the JQuery function FadeIn in your setTimeout

var timer = setTimeout(function(){
    element.FadeIn('slow');
}, 5000);