Bossan Bossan - 1 month ago 6
CSS Question

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

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

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