JSFiddle - React, Tailwind, and code Playground

HTML

<div class="SlidingPhotoFrame">
  <figure class="SlidingPhoto"></figure>
</div>

CSS

.SlidingPhotoFrame{ max-width:100%;  -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border: 1px solid #bbe3ff; padding:5px; margin-bottom:10px;  background-color:white; }

.SlidingPhoto { 
padding-top: 50.20%;  /* 450px/800px = 0.5625 */
margin:0; text-align:center; 

background:url(http://lorempixel.com/400/200/) center top no-repeat; 
background-size: cover;
-moz-background-size: cover;  /* Firefox 3.6 */
background-position: center;  /* Internet Explorer 7/8 */

animation-name:PhotoFrames;
animation-duration:5s;
animation-timing-function:ease-in-out;
animation-delay:0s;
animation-iteration-count:infinite;
animation-play-state:running;
animation-fill-mode: forwards;

    /* Safari and Chrome: */
-webkit-animation-name:PhotoFrames;
-webkit-animation-duration:20s;
-webkit-animation-timing-function:ease-in-out;
-webkit-animation-delay:0s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-play-state:running;
-webkit-animation-fill-mode: forwards;
}


@keyframes PhotoFrames
{
0% {
		opacity: 0;
		left: -100px;
	}
	
	50% {
		opacity: 1;
	}
	
	75% {
	    background:url(http://lorempixel.com/400/200/) center top no-repeat;
		opacity: 1;
		left: 100px;
	}
	
	100% {
	    background:url(http://lorempixel.com/400/200/) center top no-repeat;
		opacity: 0;
		left: 500px;
	}