JSFiddle - React, Tailwind, and code Playground

by Alexander Startsev

HTML

<div class="image image_01"></div>
<div class="image image_02"></div>
<div class="image image_03"></div>
<div class="image image_04"></div>

CSS

*{
    margin: 0;
    padding: 0;
}

html, body{
    position: relative;
    width: 100%;
    height: 100%;
}

.image{
    position: absolute;
    width: 80%;
    height: 60%;
    left: 50%;
    top: 50%;
    -webkit-background-size: cover;
    background-size: cover;
    background-position: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    -webkit-animation: imagesFading 8s infinite;
    -moz-animation: imagesFading 8s infinite;
    -o-animation: imagesFading 8s infinite;
    animation: imagesFading 8s infinite;
}

.image_01 {background-image: url(http://vignette3.wikia.nocookie.net/gravityfalls/images/6/6e/S1e19_Bill_portal.jpg/revision/latest/scale-to-width-down/1000?cb=20130720210828); animation-delay: 6s;}

.image_02 {background-image: url(http://vignette1.wikia.nocookie.net/gravityfalls/images/1/15/S1e19_Black_and_white_Bill.jpg/revision/latest/scale-to-width-down/1000?cb=20130720211045); animation-delay: 4s;}

.image_03 {background-image: url(http://vignette3.wikia.nocookie.net/gravityfalls/images/2/27/S1e19_Bill_with_arms_up.jpg/revision/latest/scale-to-width-down/1000?cb=20130720211143); animation-delay: 2s;}

.image_04 {background-image: url(http://vignette1.wikia.nocookie.net/gravityfalls/images/1/15/S1e19_Black_and_white_Bill.jpg/revision/latest/scale-to-width-down/1000?cb=20130720211045); animation-delay: 0;}

@keyframes imagesFading {
  0% {
    opacity:1;
  }
  17% {
    opacity:1;
  }
  25% {
    opacity:0;
  }
  92% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

JavaScript

// Pure CSS