@keyframes ball-grid-beat { 50% { opacity: 0.7; } 100% { opacity: 1; } } .ball-grid-beat { width: 57px; } .ball-grid-beat > div:nth-child(1) { animation-delay: 0.08s; animation-duration: 1.44s; } .ball-grid-beat > div:nth-child(2) { animation-delay: 0.48s; animation-duration: 1.35s; } .ball-grid-beat > div:nth-child(3) { animation-delay: 0.34s; animation-duration: 0.98s; } .ball-grid-beat > div:nth-child(4) { animation-delay: 0.23s; animation-duration: 1.5s; } .ball-grid-beat > div:nth-child(5) { animation-delay: 0.57s; animation-duration: 0.66s; } .ball-grid-beat > div:nth-child(6) { animation-delay: -0.13s; animation-duration: 0.98s; } .ball-grid-beat > div:nth-child(7) { animation-delay: 0.06s; animation-duration: 1.09s; } .ball-grid-beat > div:nth-child(8) { animation-delay: 0.12s; animation-duration: 1.37s; } .ball-grid-beat > div:nth-child(9) { animation-delay: 0.5s; animation-duration: 1.17s; } .ball-grid-beat > div { background-color: #6b6f82; width: 15px; height: 15px; border-radius: 100%; margin: 2px; animation-fill-mode: both; display: inline-block; float: left; animation-name: ball-grid-beat; animation-iteration-count: infinite; animation-delay: 0; }