#wave-container { position:absolute; height: 38px; width: 126px; } .dot { transform-origin: 50% 50%; height: 8px; width: 8px; border-radius : 50%; top: 0; background-color: #a24441;; position: absolute; -webkit-animation:vertical-movement 2.5s infinite ease-in-out; -moz-animation:vertical-movement 2.5s infinite ease-in-out; -ms-animation:vertical-movement 2.5s infinite ease-in-out; -o-animation:vertical-movement 2.5s infinite ease-in-out; animation:vertical-movement 2.5s infinite ease-in-out; } #d1 {left:14px;-webkit-animation-delay:-0.3s;-moz-animation-delay:-0.3s;-ms-animation-delay:-0.3s;-o-animation-delay:-0.3s;animation-delay:-0.3s;} #d2 {left:28px;-webkit-animation-delay:-0.6s;-moz-animation-delay:-0.6s;-ms-animation-delay:-0.6s;-o-animation-delay:-0.6s;animation-delay:-0.6s;} #d3 {left:42px;-webkit-animation-delay:-0.9s;-moz-animation-delay:-0.9s;-ms-animation-delay:-0.9s;-o-animation-delay:-0.9s;animation-delay:-0.9s;} #d4 {left:56px;-webkit-animation-delay:-1.2s;-moz-animation-delay:-1.2s;-ms-animation-delay:-1.2s;-o-animation-delay:-1.2s;animation-delay:-1.2s;} #d5 {left:70px;-webkit-animation-delay:-1.5s;-moz-animation-delay:-1.5s;-ms-animation-delay:-1.5s;-o-animation-delay:-1.5s;animation-delay:-1.5s;} #d6 {left:84px;-webkit-animation-delay:-1.8s;-moz-animation-delay:-1.8s;-ms-animation-delay:-1.8s;-o-animation-delay:-1.8s;animation-delay:-1.8s;} #d7 {left:98px;-webkit-animation-delay:-2.1s;-moz-animation-delay:-2.1s;-ms-animation-delay:-2.1s;-o-animation-delay:-2.1s;animation-delay:-2.1s;} #d8 {left:112px;-webkit-animation-delay:-2.4s;-moz-animation-delay:-2.4s;-ms-animation-delay:-2.4s;-o-animation-delay:-2.4s;animation-delay:-2.4s;} @keyframes vertical-movement { 0%,100% { -webkit-transform: translateY(0%); } 50% { -webkit-transform: translateY(30px); } } @keyframes vertical-movemen { 0%,100% { -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); } 50% { -webkit-transform: translateY(30px); -moz-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); } }