JSFiddle - React, Tailwind, and code Playground

by Dennis Betman

HTML

<div class="popupWrapper">
  <div class="popup"></div>
</div>

CSS

@keyframes name{
  0%{
    box-shadow: 0px 0px 3px rgba(68, 68, 68, 0.42);
    transform: translate3d(0px,0px,-900px) rotateX(90deg);
  }
  20%{
    box-shadow: 0px 0px 42px rgba(68, 68, 68, 0.42);
    transform: translate3d(0px,0px,0px) rotateX(0deg);
  }
  30%{
    box-shadow: 0px 0px 42px rgba(68, 68, 68, 0.42);
    transform: translate3d(0px,0px,20px) rotateX(0deg);
  }
  40%{
    box-shadow: 0px 0px 10px rgba(68, 68, 68, 0.42);
    transform: translate3d(0px,0px,0px) rotateX(0deg);    
  }
  100%{
    box-shadow: 0px 0px 10px rgba(68, 68, 68, 0.42);
    transform: translate3d(0px,0px,0px) rotateX(0deg); 
  }
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  background:lightgrey;
}

.popupWrapper{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  -ms-perspective: 1000px;
  -o-perspective: 1000px;
  perspective: 1000px;
}

.popup{
  transform-style: preserve-3d;
  position: absolute;
  left:50%;
  margin-left:-250px;
  top:50%;
  margin-top:-150px;
  width:500px;
  height:300px;
  background:white;
  border-radius:3px;
  box-shadow: 0px 0px 10px rgba(68, 68, 68, 0.42);
  animation: name 2.3s ease;
  transform:translate3d(0px,0px,0px);
}