Edit in JSFiddle

<div class="block">

 <div class="box">
  <div class="spin-container">
  
  
     
     <div class="shape ">
           <div class="bd">
           
           </div>
     </div>
     
    </div>
 
 </div>

</div>

.block{
  
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  
}
.spin-container {
  width: 100%;
  height: 100%;
  -webkit-animation: spin 12s linear infinite;
          animation: spin 12s linear infinite;
  position: relative;
}
.box{
  
  width: 60vmin;
  height: 60vmin;
  border: 1px dashed rgba(255, 255, 255, 0.4);
  position: relative;
 
  
  
}

.shape {
  width: 100%;
  height: 100%;
  transition: border-radius 1s ease-out;
  border-radius: 59% 41% 65% 36% / 44% 45% 55% 56%;
  -webkit-animation: morph 8s ease-in-out infinite both alternate;
          animation: morph 8s ease-in-out infinite both alternate;
  position: absolute;
  overflow: hidden;
  z-index: 5;
}

.bd {
  width: 142%;
  height: 142%;
  position: absolute;
  left: -21%;
  top: -21%;
  background: url(https://webunique.in.th/image/hotel.png);
  background-size: 100%;
  background-position: center center;
  display: flex;
  color: #003;
  font-size: 5vw;
  font-weight: bold;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-transform: uppercase;
  animation: spin 12s linear infinite reverse;
  opacity: 1;
  z-index: 2;
}

@-webkit-keyframes morph {
  0% {
    border-radius: 59% 41% 65% 36% / 44% 45% 55% 56%;
  }
  100% {
    border-radius: 30% 70%;
  }
}

@keyframes morph {
  0% {
    border-radius: 59% 41% 65% 36% / 44% 45% 55% 56%;
  }
  100% {
    border-radius: 30% 60%;
  }
}
@-webkit-keyframes spin {
  to {
    -webkit-transform: rotate(1turn);
            transform: rotate(1turn);
  }
}
@keyframes spin {
  to {
    -webkit-transform: rotate(1turn);
            transform: rotate(1turn);
  }
}