JSFiddle - React, Tailwind, and code Playground

HTML

<div class="block">
  <div class="block__curtains">
    <div class="block__curtain"></div>
    <div class="block__curtain"></div>
    <div class="block__curtain"></div>
    <div class="block__curtain"></div>
    <div class="block__curtain"></div>
  </div>
</div>

CSS

body {
  padding: 0;
  margin: 0;
}

.block {
  position: relative;
  background: url(https://source.unsplash.com/5E5N49RWtbA/600x300) center no-repeat / cover;
  height: 300px;
}

.block__curtains {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.block__curtain {
   flex: 1;
   background-image: linear-gradient(to left, #fff, #fff);
   background-size: 0%;
   background-position: 0%;
   background-repeat: no-repeat;
   animation: curtain 3s ease-in-out infinite;
}

@keyframes curtain {
  0% {
    background-size: 0%;
    background-position: 0%;
  }
  25% {
    background-size: 100%;
    background-position: 0%;
  }
  50% {
    background-size: 100%;
    background-position: 100%;
  }
  75% {
    background-size: 0%;
    background-position: 100%;
  }
  100% {
    background-size: 0%;
    background-position: 0%;
  }
}