JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <img src="http://placekitten.com/200/300">
    <img src="http://placekitten.com/201/300">
    <img src="http://placekitten.com/202/300">
    <img src="http://placekitten.com/210/300">
</div>

CSS

div {
    position: relative;
    width: 200px;
    height: 300px;
    overflow: hidden;
}

div img {
    position: absolute;
    opacity: 0;
}

div img:nth-child(1) { -webkit-animation-delay: 0 }
div img:nth-child(2) { -webkit-animation-delay: 1s }
div img:nth-child(3) { -webkit-animation-delay: 2s } 
div img:nth-child(4) { -webkit-animation-delay: 3s }

div img {
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-name: opacidad;
    -webkit-animation-duration: 4s;
}

@-webkit-keyframes opacidad {
    from { opacity: 0 }
    50% { opacity: 1 }
    to { opacity: 0 }
}