want a pop up after some second

Question

I want a popup with a close button. Which will display after 5 seconds and after fully page loaded.

Is there any CSS tricks?

Answer 1

You can use css animation to make the div's scale 0 in the first 5s after page load and then after 5s it will change automatically to scale 1 because it's the default scale value

@keyframes pop
{
  0%{transform:scale(0);}
  100%{transform:scale(0);}
}

<div style="animation: pop 5s;">this div will be shown exactly 5s after page load</div>

Answer 2

You can try this

.container {
  width: 100vw;
  height: 100vh;
  background: lightblue;
  position: relative;
}

.popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  background: white;
  opacity: 0;
  animation: popup .5s 5s ease forwards;
}
@keyframes popup {
 from {opacity: 0; }
 to{opacity: 1; }
}

<div class="container">
  <div class="popup">Popup</div>
</div>

Answer 3

I'm not really sure if this will works on you or not

but somehow a guy out there is asked nearly same (but different context) case. you can try to check this

note : correct me if im wrong

Answer 4

It can be done with CSS only, using animations and checkbox hack

I suggest in the future you try and do it yourself and at least post what you have tried or some sample code. This is not a code making site. We help you get to a solution but we need to see that you have tried something.

Anyway, i had some free time and wanted to help you. But this won't happen often on SO

So here it is. Using silibing selectors ( +, ~ ), CSS animations and checkbox click hack

See below

body {
  margin: 0
}

input:checked,
input:checked + .popMe,
input:checked ~ .overlay {
  display: none;
}

input {
  position: fixed;
  right: 15px;
  top:30%;
  opacity: 0;
  animation-name: justopac;
  animation-delay: 1s;
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
  z-index: 2;
}

.popMe {
  height: 150px;
  width: 150px;
  left: 50%;
  top: 50%;
  transform: scale(0) translate(-50%, -50%);
  position: fixed;
  background: red;
  animation-name: popMe;
  animation-delay: 1s;
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
  transform-origin: left;
  z-index: 2;
}

.overlay {
  position: fixed;
  animation-name: justopac;
  animation-delay: 1s;
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  opacity: 0;
}

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

@keyframes popMe {
  0% {
    transform: scale(0) translate(-50%, -50%);
  }
  100% {
    transform: scale(1) translate(-50%, -50%);
  }
}

<input type="checkbox">
<div class="popMe">
  <p>
    This is a popup
  </p>
</div>
<div class="overlay">

</div>

<div class="content">
  Lorem ipsum dolor sit amet, curabitur eu a duis vitae odio, ac consectetuer conubia at, donec ante aliquam at, placerat neque leo, ac turpis accumsan. Aenean viverra pellentesque aliquet, tincidunt dolor consequat lorem dolorum mauris, amet bibendum sed
  lacus, sapien duis nullam. Pellentesque nunc laoreet id egestas integer ac. Proin dis tristique sodales mollis incididunt. Est phasellus elit libero, fermentum suspendisse enim convallis mauris sed vulputate, ac aliquam integer quis consectetuer pellentesque,
  wisi urna velit pharetra pellentesque, dictum velit nec metus vitae. Neque tincidunt nec, eu et ligula etiam sit aliquam wisi. Cupiditate scelerisque ipsum pellentesque maecenas quam, ipsum nec augue suscipit, tincidunt mi ac ut risus urna tristique.
  Fermentum vel eros, posuere convallis. Est lectus morbi leo mollis, pede nihil pharetra venenatis, sit est fermentum.
</div>