Добрый день уважаемые. Помогите разобраться с анимацией. Есть вот такой набросок.
<!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'); Но тут нужна задержка. + меня смущает что надо постоянно удалять и прибавлять этот класс. Может можно как то проще ?
