#container{
position : absolute;
top : 45%;
left : 45%;
width : 50px;
height : 27px;
background-color :;
}

.pop{
float : left;
background-color : ;
width : 10px;
height : 27px;
animation-name : movement;
animation-duration : 2s;
animation-iteration-count : infinite;
}

.disc{
position : relative;
top : 22px;
left : ;
border-radius : 100%;
width : 5px;
height : 5px;
background-color : pink;
animation-duration : 1s;
animation-timing-function : ;
animation-iteration-count : infinite;
animation-direction : alternate;
border : 1px solid black;

}

#disc1{
animation-name : disc1pop;
animation-iteration-count : infinite;
}

#disc2{
animation-name : disc2pop;
animation-delay : 0.2s;
}

#disc3{
animation-name : disc3pop;
animation-delay : 0.4s;
}

#disc4{
animation-name : disc4pop;
animation-delay : 0.6s;
}

#disc5{
animation-name : disc5pop;
animation-delay : 0.8s;
}
/*
#testc{
position : relative;
top : 100px;
}

#test{
position : absolute;
left : ;
width : 100px;
height : 100px;
background-color : red;
}
*/
@keyframes movement{
100%{
transform : rotateY(360deg);
 }
}

@keyframes disc1pop{
0%{top : 22px;}
50%{top : 0px;}
100%{top : 22px;}
}

@keyframes disc2pop{
0%{top : 22px;}
50%{top : 0px;}
100%{top : 22px;}
}

@keyframes disc3pop{
0%{top : 22px;}
50%{top : 0px;}
100%{top : 22px;}
}

@keyframes disc4pop{
0%{top : 22px;}
50%{top : 0px;}
100%{top : 22px;}
}

@keyframes disc5pop{
0%{top : 22px;}
50%{top : 0px;}
100%{top : 22px;}
}