JSFiddle - React, Tailwind, and code Playground

by Anna

HTML

<div id="box">
            <div id="crossfading">
                <img class="img1" src="https://40.media.tumblr.com/tumblr_mdwufgcDzC1rdi5keo1_500.png" />
                <img class="img2" src="http://orig11.deviantart.net/e3d9/f/2012/171/0/a/png_cat_by_eross_666-d5457jz.png" />
            </div>
</div>

CSS

#box {
        background-color: blue;
        position: absolute;
        width:300px;
        height: 300px;
        margin: 0;padding: 0;
    }

    #crossfading {
        position:absolute;
        top:0px;
        left:0;
        margin:auto;
    }


    #crossfading img {
        width: 300px;
        height: 300px;
        position: absolute;
        top: 0px;
        left: 0px;
        color: transparent;
        opacity: 0;
        z-index: 0;
        -webkit-backface-visibility: hidden;
        -webkit-animation: imageAnimation 6s linear infinite 0s;
        -moz-animation: imageAnimation 6s linear infinite 0s;
        -o-animation: imageAnimation 6s linear infinite 0s;
        -ms-animation: imageAnimation 6s linear infinite 0s;
        animation: imageAnimation 6s linear infinite 0s; 
    }
    

   #crossfading > img:nth-child(2)  {
    -webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
    -o-animation-delay: 1s;
    -ms-animation-delay: 1s;
    animation-delay: 1s; 
    }

    #crossfading > img:nth-child(3) {
    -webkit-animation-delay: 3s;
    -moz-animation-delay: 3s;
    -o-animation-delay: 3s;
    -ms-animation-delay: 3s;
    animation-delay: 3s; 
    }


@-webkit-keyframes imageAnimation { 
    0% { opacity: 0;
    -webkit-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -webkit-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

@-moz-keyframes imageAnimation { 
    0% { opacity: 0;
    -moz-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -moz-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

@-o-keyframes imageAnimation { 
    0% { opacity: 0;
    -o-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -o-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

@-ms-keyframes imageAnimation { 
    0% {...