<html>
<head>
  <meta charset="utf-8">
  <title>Title</title>
</head>
<body>
   <div class="container d-flex align-items-center">
     <div class="portal">
         <div class="portal__inner">
            <div class="banner">
              <img src="https://i.ibb.co/vqLZPs4/cartman-drawing-south-park-1.png" alt="">
           </div>
       </div>  
     </div>
     
   </div>
</body>
</html>
.banner {
  margin-left: -20px;
  animation: animationFrames linear 3s infinite;
}

@keyframes animationFrames{
  0% {
    transform:  translateX(0) rotate(0deg);
  }
  50% {
    transform:  translateX(-100px) rotate(10deg);
  }
  100% {
    transform:  translateX(0) rotate(0deg);
  }
}

.portal {
  width: 402px;
  height: 426px;
  background-image: url(https://i.ibb.co/nmjyGvP/left.png);
  position: relative;
}

.portal:after {
  content: "";
  display: block;
  position: absolute;
  left: 125px;
  top: 50px;
  z-index: 5;
  background-image: url(https://i.ibb.co/QPR1fvQ/portal.png);
  background-repeat: no-repeat;
  background-position: left center;
  width: 146px;
  height: 318px;
}

.portal__inner {
  display: block;
  position: absolute;
  left: 135px;
  top: 50px;
  z-index: 3;
  background-repeat: no-repeat;
  background-position: left center;
  width: 300px;
  height: 318px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-radius: 100px;
}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.