Как сделать подобную анимацию
Пишу следующее
HTML
<div class="pos">
<div class="q-1 active"></div>
<div class="q-2 active"></div>
<div class="q-3 active"></div>
<div class="q-4 active"></div>
</div>
CSS
.pos {
margin-top: 150px;
}
.q-1,
.q-2,
.q-3,
.q-4,
.q-5,
.q-6,
.q-7 {
position: relative;
display: inline-block;
width: 40px;
height: 1px;
background: red;
}
.q-1.active:after{
position: absolute;
content:url('flower-1.png');
height:145px;
top:-145;
}
.q-2.active:after{
position: absolute;
content:url('flower-2.png');
height: 91px;
top: -92px;
}
.q-3.active:after{
position: absolute;
content:url('flower-3.png');
height: 120px;
top: -120px;
}
.q-4.active:after{
position: absolute;
content:url('flower-4.png');
height: 95px;
top: -95px;
}
JS
el=$(".pos div")
cnt=0
$(".pos div").each(function(i,e){
setInterval(function(){
el.eq(cnt++).addClass("active")
},2000)
el.removeClass("active")
})