HTML
<div id="contener">
<div class="element" id="left">
<div class="therd">
</div>
<div class="bol">
</div>
</div>
<div class="element" id="midle">
<div class="therd">
</div>
<div class="bol">
</div>
</div>
<div class="element" id="midle">
<div class="therd">
</div>
<div class="bol">
</div>
</div>
<div class="element" id="midle">
<div class="therd">
</div>
<div class="bol">
</div>
</div>
<div class="element" id="right">
<div class="therd">
</div>
<div class="bol">
</div>
</div>
</div>
CSS
#contener{
position:absolute;
left:calc(50% - 125px);
top:20%;
}
.element{
display:inline-block;
float:left;
}
.therd{
background:#777777;
width:2px;
height:200px;
left:25px;
position:relative;
}
.bol{
background:#005300;
width:50px;
height:50px;
border:0;
border-radius:25px;
}
#left{
transform-origin: 25px 0px;
animation: leftbol 1s ease-in infinite alternate;
}
@keyframes leftbol {
0%{transform: rotate(35deg);}
45%{transform: rotate(1deg);}
50%{transform: rotate(0deg);}
55%{transform: rotate(-1deg);}
}
#right{
transform-origin: 25px 0px;
animation: rightbol 1s ease-out infinite alternate;
}
@keyframes rightbol {
45%{transform: rotate(1deg);}
50%{transform: rotate(0deg);}
55%{transform: rotate(-1deg);}
100%{transform: rotate(-35deg);}
}
#midle{
transform-origin: 25px 0px;
animation: midlebol 1s ease-in infinite alternate;
}
@keyframes midlebol {
45%{transform: rotate(2deg);}
50%{transform: rotate(0deg);}
55%{transform: rotate(-2deg);}
}
