JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">

<a href="#"> <img src="images/img_1.jpg" alt="Lions"/ class="q1"> </a>
<a href="#"> <img src="images/img_2.jpg" alt="Lions"/ class="q2"> </a>
<a href="#"> <img src="images/img_3.jpg" alt="Lions"/ class="q3"> </a>
<a href="#"> <img src="images/img_4.jpg" alt="Lions"/ class="q4"> </a>
<a href="#"> <img src="images/img_5.jpg" alt="Lions"/ class="q5"> </a>
</div>

CSS

@keyframes c1 {
   13.5%{
	   left:-252px;
   }
   13.6%{
		left:800px;
   }
   to{
	   left:0;
   }
}
@keyframes c2 {
   27%{
	   left:-252px;
   }
   27.1%{
		left:930px;
   }
   to{
	   left:255px;
   }
}
@keyframes c3 {
   40.5%{
	   left:-252px;
   }
   40.6%{
		left:1060px;
   }
   to{
	   left:510px;
   }
}
@keyframes c4 {
   54%{
	   left:-252px;
   }
   54.1%{
		left:1190px;
   }
   to{
	   left:765px;
   }
}
@keyframes c5 {
   67.5%{
	   left:-252px;
   }
   67.6%{
		left:1320px;
   }
   to{
	   left:1020px;
   }
}
div{
	border:1px black solid;
	position:relative;
}
a img{
	width:250px;
}
.q1{
	position:absolute;
	left:0;
	animation: c1 14s linear infinite;
}
.q2{
	position:absolute;
	left:255px;
		animation: c2 14s linear infinite;
}
.q3{
	position:absolute;
	left:510px;
		animation: c3 14s linear infinite;
}
.q4{
	position:absolute;
	left:765px;
		animation: c4 14s linear infinite;
}
.q5{
	position:absolute;
	left:1020px;
		animation: c5 14s linear infinite;
}