Javascript-форум - .each() для анимации

Добрый день уважаемые. Помогите разобраться с анимацией. Есть вот такой набросок.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<style type="text/css">
	.exampl{

		width: 100%;
		height: 100px;
		margin: 1%;
	}

	.pic1{
		background: url(https://github.com/BlackStar1991/Pictures-for-sharing-/blob/master/smiles/sm1.png?raw=true) no-repeat 50% 50%;
	}

	.pic2{
		background: url(https://github.com/BlackStar1991/Pictures-for-sharing-/blob/master/smiles/sm2.png?raw=true) no-repeat 50% 50%;
	}

	.pic3{
		background: url(https://github.com/BlackStar1991/Pictures-for-sharing-/blob/master/smiles/sm3.png?raw=true) no-repeat 50% 50%;
	}

	.rightBl{
		width: 100%;
		height: 700px;
		perspective: 1000px;
	}

	.bl{
		float: left;
		margin-left: 1%;
		width: 80px;
		height: 80px;

		border: 1px solid black;
	}

	.rotPic{
	animation: rotateImg 3s ease-in  normal;
	animation-fill-mode: forwards;
}


@keyframes rotateImg{
	0%{
		transform: rotateY(0deg);
		transform-origin: center center;
	}

	100%{
		transform: rotateY(5turn);
		transform-origin: center center;
	}
}

</style>
</head>

<body>
	<div class="exampl">
		<div class="bl pic1"></div>
		<div class="bl pic2"></div>
		<div class="bl pic3"></div>
	</div>
	<div class="rightBl">
		<div class="bl rotPic"></div>
		<div class="bl "></div>
		<div class="bl"></div>
		<div class="bl"></div>
		<div class="bl"></div>
		<div class="bl"></div>
		<div class="bl"></div>
		<div class="bl"></div>
	</div>

<script type="text/javascript">
	var pic = $(".rightB .bl"),
		rotate = $(".rotPic");

		setInterval(function(){

	$.each(pic, function(indx){
	
		 	$(this).addClass('rotPic');

});
 		setInterval(function(){
			$.each(pic, function(indx){

		 	$(this).removeClass('rotPic');
		 });

        },5000);

 },24000);


</script>
</body>
</html>

Теперь я опиши как оно должно работать:
1)Каждому элементу $(".rightB .bl") присваевается фоном первая картинка смайла.
2) Через 2сек каждому элементу $(".rightB .bl"), по очереди(с задержкой 1.5сек) присваевается класс с анимацией $(".rotPic").
Тут подробнее опишу - Первая картинка начала крутиться, на половине анимации $(".rotPic") (1.5сек) начинает крутиться вторая картинка. На 2.99сек у первой картинки происходит смена фона на смаил2. удаляеться класс $(".rotPic"). Аналогично присходит с второй картинкой,
Ей присвоился класс с задержкой 1,5сек от первой, на половине её анимации уже третьей картинке присваиваеться класс $(".rotPic") и тд.
пока не переберем все 8 картинок, и у них у всех будет фоном Смаил 2. Дальше цикл повторяеться, только теперь смаил 2 меняеться на смаил 3 и так далие.
3) Когда у всех будет Смаил 3 картинки снова начинают крутится и всё это меняеться на Смаил 1.

Подскажите как реализовать?
Я начал с того что каждому элементу добавляю класс с анимацией addClass('rotPic'); Но тут нужна задержка. + меня смущает что надо постоянно удалять и прибавлять этот класс. Может можно как то проще ? :write: