Efeito em insertAfter

Tenho um botão, que pega a primeira li da ul e joga ela para a ultima posição ininterruptamente e assim eu faço um efeito de slideshow.

HTML:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="slider">

	<ul>
 <li> Slide 1 </li>
 <li> Slide 2 </li>
 <li> Slide 3 </li>
 <li> Slide 4 </li>
	</ul>

	<button id="back"> BACK </button>
	<button id="next"> NEXT </button>

</div>

	**CSS:**

* {

	margin: 0;
	padding: 0;
}

body {

 display: flex;
 width: 1000px;
 margin: 0 auto;
}

.slider {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 1000px;
	height: 200px;
	overflow: hidden;
	border: 1px solid #000;
}

.slider > ul {

	display: flex;
	flex-wrap: wrap;
	width: 5000px;
}

.slider > ul > li {

	display: flex;
 justify-content: center;
	width: 500px;
	height: 150px;
	margin: 10px;
}

.slider > ul > li:hover {

	cursor: crosshair;
}

.slider > button {

	position: absolute;
	display: flex;
	justify-content: center;
	top: calc(45% - 15px);
	width: 30px;
	height: 30px;
	opacity: 0.2;
}

.slider > button:hover {

	opacity: 1;
	cursor: pointer;
}

.slider > button#back {

	left: 10px;
}

.slider > button#next {

	right: 10px;
}

.animacao {
 animation-duration: 4s;
 animation-name: identifier;
}

@keyframes identifier {
0% { right: 0; }
50% { right: 50%;}
75% { right: 75%; }
100% { right: 100%; }
}

JQUERY:

function intervalo () {
	$(".slider > #next").click ();
}

var interval = setInterval(intervalo,4000);

$(".slider > ul > li")

	.mouseover(function(){
 clearInterval(interval);
	})
	.mouseout(function(){
 interval = setInterval(intervalo,4000);
	})
 .addClass("animacao");

$(".slider > #back").click ( function(){
	var liMover = $('.slider ul li:last-of-type'); // copia o conteudo da última
	$(liMover).insertBefore('.slider ul li:first-of-type'); // insere antes da primeira
});

$(".slider > #next").click ( function(){
	var liMover = $('.slider ul li:first-of-type'); // copia o conteudo da primeira
	$(liMover).insertAfter('.slider ul li:last-of-type'); // insere depois da última
});

	Tudo funciona bem.

	Mas estou tentando adicionar um efeito de transição tipo quando as lis mudarem de posição, elas correrem da direita para a esquerda em vez de aparecerem abruptamente.

	 

	Será que tem como?