JSFiddle - React, Tailwind, and code Playground

by vals

HTML

<div class="base">
<div class="layer" id="layer1"></div>
<div class="layer" id="layer2"></div>
<div class="layer" id="moving"></div>
</div>

CSS

.base {
   position: absolute;
   width: 600px;
   height: 400px;
   left: 300px;
   -webkit-transform: rotate3D(1,1.5,0,-14deg);
   -webkit-transform-style: preserve-3d;
   background-image: url(image1.jpg), url(image2.jpg);
   background-size: cover;
   -webkit-animation: base linear 40s infinite; 
  z-index: -1;
}

.base, .base:after {
   -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50% 100%, 50% 50%, 0% 50%);
}
.base:after {
  -webkit-animation: swapbase linear 10s infinite;
  opacity: 0.5;
}

.layer {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  bottom: 0;
  background-image: inherit;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: -1;
}

#layer1 {
   -webkit-transform: translateZ(150px);
}
#layer1, #layer1:after {
  -webkit-clip-path: polygon(0% 50%, 50% 50%, 50% 100%, 25% 100%, 25% 75%, 0% 75%);
}
#layer1:after {
  -webkit-animation: swap1 linear 10s infinite;
}

#layer2 {
   -webkit-transform: translateZ(300px);
}
#layer2, #layer2:after {
  -webkit-clip-path: polygon(0% 75%, 25% 75%, 25% 100%, 0% 100%);
}
#layer2:after {
  -webkit-animation: swap2 linear 10s infinite;
}

.layer:after, .base:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  background-size: 0px, cover;
  background-repeat: no-repeat;
  background-image: inherit;
}

#moving {
  background-size: 0px, cover;
  -webkit-animation: moving linear 10s infinite;
}


@-webkit-keyframes swapbase {
    0% {opacity: 0;}
   60% {opacity: 0;}
   60.1% {opacity: 1; -webkit-filter: brightness(2);}
   61% {opacity: 1; -webkit-filter: none;}
   97% {opacity: 1;}
  98%, 100% {opacity: 0;}
}

@-webkit-keyframes swap1 {
    0% {opacity: 0;}
   50% {opacity: 0;}
   50.1% {opacity: 1; -webkit-filter: brightness(2);}
   51% {opacity: 1; -webkit-filter: none;}
   97% {opacity: 1;}
  98%, 100% {opacity: 0;}
}

@-webkit-keyframes swap2 {
    0% {opacity: 0;}
   40% {opacity: 0;}
   40.1% {opacity: 1;...