JSFiddle - React, Tailwind, and code Playground

by Anupama

HTML

<div class="cont pos-rel">
<img src="http://192.168.1.5:8002/ad_img.jpeg" alt="clouds" class="entryImg pos-abs "/>
</div>

CSS

.cont {
    width:220px;
    height:315px;
    overflow:hidden;
    position:relative;
    background:url("http://192.168.1.5:8002/app_bg3.jpeg");
}
.pos-abs {
    position:absolute;
}
img {
  -webkit-animation-duration: 3s;
  -webkit-animation-name: slidein;
  animation-duration: 3s;
  animation-name: slidein;
}

@-webkit-keyframes slidein {
  0%,75% {
       left : 0%;
        opacity:1;
   }
   100% {
        left : -50%;
        opacity:0;
   }
}

@keyframes slidein {
  0%,75% {
       left : 0%;
        opacity:1;
   }
   100% {
        left : -50%;
        opacity:0;
   }
}