JSFiddle - React, Tailwind, and code Playground

by icodeforlove

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"/>
    <img class="background" src="http://farm2.staticflickr.com/1415/983021323_8eb2f92c01.jpg"/>
    <img class="background" src="http://farm1.staticflickr.com/168/397834706_6a46c6ada5.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 0s linear infinite;
    animation: fadePaddedFor5Images 5s 0s linear infinite;
}

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

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

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

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

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