JSFiddle - React, Tailwind, and code Playground

HTML

<div class="foo"></div>

CSS

.foo {
  width: 400px;
  height: 200px;
  background: url(http://lorempixel.com/400/200/sports/);
  position: relative;
}
.foo:after {
  content: '';
  width: 400px;
  height: 200px;
  transition: opacity .5s ease-in;
  position: absolute;
  left: 0; top: 0;
  background: url(http://lorempixel.com/400/200/animals/);
  animation: foo 10s infinite;
}

@keyframes foo {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}