#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); } }