JSFiddle - React, Tailwind, and code Playground

HTML

<div class="clingfilm">
    <div class="apple"></div>        
</div>

CSS

body {
    overflow:hidden;                                
}

.clingfilm {
    -webkit-animation: cl 5s infinite;
    background: pink;
    height: 300px;
    right: 0%;
    position: absolute;
    top: 0%;
    width: 300px;
}
.apple {
    opacity:0.5;
    -webkit-animation: ap 5s infinite;
    background: blue url('images/apple.png') no-repeat 0 0;
    height: 300px;
    left: 0%;
    position: absolute;
    overflow: hidden;
    top: 0%;
    width: 300px;
}
@-webkit-keyframes ap {
    0%        { left:0%;   top: 0%;  }
    25%       { left: -100%; top: 0%;  }
    50%       { left: -100%; top: -100%; }
    75%       { left: 0%;   top: -100%; }
    100%      { left: 0%;   top: 0%;  }
}
@-webkit-keyframes cl {
    0%        { left: 0%;  top: 0%;  }
    25%       { left: 100%;    top: 0%;  }
    50%       { left: 100%;  top: 100%; }
    75%       { left: 0%;    top: 100%; }
    100%      { left: 0%;    top: 0%;  }
}