#app {
position:relative;
}
.outer {
position:fixed;
top:50%;
left:50%;
transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
text-align:center;
overflow:hidden;
width:90%;
}
.inner {
position:relative;
width:50px;
height:250px;
display:inline-block;
}
.inner div {
position:absolute;
width:50px;
height:50px;
border-radius:50%;
}
.top {
top:0;
background-color:yellowgreen;
-webkit-animation:5s topNode ease-in-out infinite;
animation:5s topNode ease-in-out infinite;
}
.foot {
bottom:0;
background-color:royalblue;
-webkit-animation:5s footNode ease-in-out infinite;
animation:5s footNode ease-in-out infinite;
}
@-webkit-keyframes topNode {
0% {
transform:scale(0.5);
opacity:0.75;
top:0;
}
25% {
transform:scale(1);
opacity:1;
}
50% {
transform:scale(0.5);
opacity:0.75;
top:200px;
}
75% {
transform:scale(0.25);
opacity:0.5;
}
100% {
transform:scale(0.5);
opacity:0.75;
top:0;
}
}@keyframes topNode {
0% {
transform:scale(0.5);
opacity:0.75;
top:0;
}
25% {
transform:scale(1);
opacity:1;
}
50% {
transform:scale(0.5);
opacity:0.75;
top:200px;
}
75% {
transform:scale(0.25);
opacity:0.5;
}
100% {
transform:scale(0.5);
opacity:0.75;
top:0;
}
}@-webkit-keyframes footNode {
0% {
transform:scale(0.5);
opacity:0.75;
bottom:0;
}
25% {
transform:scale(0.25);
opacity:0.5;
}
50% {
transform:scale(0.5);
opacity:0.75;
bottom:200px;
}
75% {
transform:scale(1);
opacity:1;
}
100% {
transform:scale(0.5);
opacity:0.75;
bottom:0;
}
}@keyframes footNode {
0% {
transform:scale(0.5);
opacity:0.75;
bottom:0;
}
25% {
transform:scale(0.25);
opacity:0.5;
}
50% {
transform:scale(0.5);
opacity:0.75;
bottom:200px;
}
75% {
transform:scale(1);
opacity:1;
}
100% {
transform:scale(0.5);
opacity:0.75;
bottom:0;
}
}#line {
width:0;
height:145px;
border:2px solid transparent;
border-radius:0px;
opacity:0.5;
background-color:#CCCCCC;
top:50px;
left:23px;
bottom:50px;
-webkit-animation:5s lineNode linear infinite;
animation:5s lineNode linear infinite;
}
@keyframes lineNode {
0% {
transform:scale(0.5);
transform:rotateX(0deg);
}
100% {
transform:scale(1);
transform:rotateX(360deg);
}
}