JSFiddle - React, Tailwind, and code Playground

HTML

<div class='slide'>
  <div></div>
</div>
<div class='slide'>
  <div></div>
</div>

CSS

body { overflow:hidden; }
.slide {
  position:absolute;
  width:100%; height:100%;
  background:black;
  -webkit-transform-origin: bottom center;
  transform-origin: bottom center;
}
.slide div {
  position:absolute;
  width:30%; height:30%;
  background:white;
  border-radius:50%;
  top:50%; left:50%;
  margin-top:-15%; margin-left:-15%;
}
.slide:nth-of-type(1) { background:white; }
.slide:nth-of-type(1) div { background:black; }
.slide:nth-of-type(2) { -webkit-animation:slide 4s ease-out infinite; animation:slide 4s ease-in-out infinite; }
@-webkit-keyframes slide {
  0% { -webkit-transform: perspective(450px); }
  10%,15% { -webkit-transform: perspective(450px) rotateX(30deg); }
  50%,100% { -webkit-transform: perspective(450px) rotateX(30deg) translateY(100%);  }
}
/*
@keyframes slide {
  0% { transform: perspective(350px); }
  25% { transform: perspective(350px) rotateX(30deg); }
  50%,100% { transform: perspective(350px) rotateX(30deg) translateY(100%);  }
}