JSFiddle - React, Tailwind, and code Playground

by Vladimir

HTML

<main>
<div class="b1">

</div>
<div class="b2">

</div>
<div class="b3">

</div>
</main>

CSS

main {
  width: 330px;
}
div {
  float:left;
  width:33%;
  height: 200px;
  /*background: url('http://lorempixel.com/output/food-q-c-330-200-1.jpg'), url('http://lorempixel.com/output/nature-q-c-330-200-2.jpg') no-repeat; */
 /* background-size: 33% 100%;*/
}
.b1 {
  background-position: 0% 0;
  animation: ab1 2s linear 2s infinite alternate;
}
.b2 {
  background-position: 49% 0;
  animation: ab2;
}
.b3 {
  background-position: 98% 0;
  animation: ab3;
}
@keyframes ab1 {
    0% {
      background: url('http://lorempixel.com/output/food-q-c-330-200-1.jpg') 0 0  no-repeat, url('http://lorempixel.com/output/nature-q-c-330-200-2.jpg') 0 -100% no-repeat;
    }
    100% {
      background: url('http://lorempixel.com/output/food-q-c-330-200-1.jpg') 0 100% no-repeat, url('http://lorempixel.com/output/nature-q-c-330-200-2.jpg') 0 0 no-repeat;
    }
}