JSFiddle - React, Tailwind, and code Playground

HTML

<div id="landing">
    <img class="background" src="http://farm6.staticflickr.com/5145/5576437826_940f2db110.jpg"/>
    <img class="background" src="http://farm4.staticflickr.com/3611/3463265789_586ce40aef.jpg"/>
    <img class="background" src="https://farm4.staticflickr.com/3845/14745278944_02b5704956_k.jpg"/>
    Text
</div>

CSS

#landing {
    position: relative;
    border: 1px solid #666;
    height: 300px;
    color: white;
}

#landing .background {
    opacity: 0;
    display: block;
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
}

#landing .background:nth-child(1) {
    -webkit-animation: fadePaddedFor5Images 5s 3s linear infinite;
    animation: fadePaddedFor5Images 5s 3s linear infinite;
}

#landing .background:nth-child(2) {
    -webkit-animation: fadePaddedFor5Images 5s 3s linear infinite;
    animation: fadePaddedFor5Images 5s 3s linear infinite;
}

#landing .background:nth-child(3) {
    -webkit-animation: fadePaddedFor5Images 5s 3s linear infinite;
    animation: fadePaddedFor5Images 5s 3s linear infinite;
}


/* 1/(2*total) */
@-webkit-keyframes fadePaddedFor5Images {
    10% {opacity: 1;}
    20% {opacity: 1;}
    30% {opacity: 1;}
  
}
@keyframes fadePaddedFor5Images {
    10% {opacity: 1;}
    20% {opacity: 1;}
    30% {opacity: 1;}
  
}