JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container"> <a href="second"><img src="http://placekitten.com/300/300" class="back"></a>
 <a href="first"> <img class="front" src="http://placekitten.com/300/301">
     </div></a>

CSS

.container {
    position:relative;
    height:500px;
    width:500px;
    margin:0 auto;
}
.container img {
    position:absolute;
    transition: opacity 2s ease-in-out;
}
.back {
    z-index:1;
}
@-webkit-keyframes anim {
    from {
        z-index:1;
    }
    to {
        z-index:-2;
    }
}
.back {
    -webkit-animation:anim 5s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-timing-function: ease-in-out;
}

@-webkit-keyframes anim2 {
    from {
        z-index:1;
    }
    to {
        z-index:-2;
    }
}